CSS Flexbox布局生成器
可视化构建Flexbox布局：方向、换行、justify-content、align-items、gap以及每个元素的伸展。提供页头、侧边栏和卡片网格等预设，导出CSS、SCSS、Tailwind。
免费 在浏览器中运行 无需注册
正在加载CSS Flexbox生成器…
您的文件绝不离开您的设备
如何使用CSS Flexbox生成器
- 1
在此页面打开CSS Flexbox生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
Flexbox是CSS中把元素排成一行或一列的布局系统，常用于导航栏、按钮组、卡片和居中内容。它的属性功能强大，但很容易混淆。这款Flexbox生成器让你通过按钮修改属性，在实时盒子上查看效果，然后复制代码。
如何构建Flex布局
- 从预设开始：水平、垂直、居中、space between、space around、space evenly、网格、页头、侧边栏或卡片网格。
- 设置容器：flex-direction、flex-wrap、justify-content、align-items、align-content和gap。
- 添加或删除子元素，并调整每个元素的flex-grow和尺寸。
- 复制CSS、SCSS或Tailwind类名。
Flexbox速查表
| 属性 | 作用 |
|---|---|
| flex-direction | 主轴方向：row（水平）或column（垂直） |
| justify-content | 沿主轴的间距分配：start、center、end、between、around、evenly |
| align-items | 交叉轴上的对齐：stretch、start、center、end、baseline |
| flex-wrap | 空间不足时元素是否换行 |
| gap | 元素之间的间距 |
| flex-grow | 元素扩展以填充剩余空间的比例 |
常用写法
- 任意内容居中：display: flex; justify-content: center; align-items: center。
- 左侧标志、右侧菜单：在页头上使用justify-content: space-between。
- 侧边栏布局：固定宽度的侧边栏加上flex-grow: 1的主区域。
- 自动换行的卡片：flex-wrap: wrap，配合gap和卡片最小宽度。
Flexbox还是Grid？
单一方向的布局用Flexbox，例如一排按钮或一列表单字段；行和列需要对齐的二维布局用CSS Grid。很多页面会同时使用两者。页面网格请看网格系统生成器；美化盒子可用圆角和阴影生成器。
常见问题
如何用Flexbox让div居中？
在父元素上设置display: flex、justify-content: center和align-items: center。如需在较高区域内垂直居中，请给父元素设置高度。
justify-content和align-items有什么区别？
justify-content沿主轴分布元素（行方向时为水平），align-items在交叉轴上对齐元素（行方向时为垂直）。
什么时候用Flexbox而不是Grid？
导航栏、按钮组等单方向布局用Flexbox；有行有列的二维布局用Grid。
可以获取Tailwind类名吗？
可以。选择Tailwind导出，即可得到flex、justify-between和gap-4等工具类。
如何让元素换到下一行？
在容器上设置flex-wrap: wrap，空间不足时元素就会换到新的一行。
flex-grow有什么作用？
它让元素占据剩余的空闲空间。flex-grow: 1的元素会扩展，而值为0的元素保持原有尺寸。