CSS Flexbox 生成器
可视化的 CSS Flexbox 布局生成器，轻松搞定弹性盒子布局。
CSS Flexbox 布局生成器
在线 CSS Flexbox 布局生成器，可视化调整 Flex 属性并生成代码
常用布局
容器设置
10px
项目设置
在预览区点击项目进行单独设置
预 览
主轴
交叉轴
主轴
交叉轴
1
2
3
CSS 代码
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-content: stretch;
gap: 10px;
}关于此工具
这是一款功能强大的 CSS Flexbox 可视化布局工具。它不仅支持调整容器的各项属性（如方向、对齐、换行及间距 Gap），还允许您单独配置每个子项目的伸缩比例（Grow/Shrink）、基准大小（Basis）及自身对齐方式。通过直观的主轴与交叉轴辅助线，您可以轻松掌握 Flex 布局逻辑。内置的常用布局预设（如完全居中、响应式网格等）可让您一键生成标准的 CSS 代码，显著提升 UI 开发效率。
功能特点
- 🍱 完整属性：支持 Flex 容器与项目的全套属性配置（Direction, Align, Wrap, Gap等）
- ⚡ 常用预设：提供完全居中、侧边栏、网格等多种常用布局一键应用
- 👁️ 实时预览：可视化展示主轴与交叉轴，直观感受布局逻辑的变化
- 🖱️ 交互操作：支持动态增删项目，可点击单个项目进行单独的 Flex 属性微调
- 💻 代码生成：自动生成标准 CSS 代码，包含容器与子项目的完整样式