CSS Flexbox 生成器
弹性布局（flexbox）对不齐？我们免费的 CSS Flexbox 生成器让你可以可视化设计弹性容器布局，导出生产级代码。通过直观控件设置 flex direction、justify-content、align-items、flex-wrap、gap 等属性，实时预览立即让你看到效果。无论是导航栏、卡片网格、居中一个 div（终于！），还是复杂的仪表盘布局，这个工具让 flexbox 变得可预测、易读。再也不用猜数值或依赖 margin hack，只需拖拽、调整、复制干净的 CSS 代码。
功能介绍
Flexbox（CSS Flexible Box Layout）是一种一维布局方法，用于按行或列排列元素。它解决了许多经典 CSS 难题：垂直居中、等高列、不修改 HTML 就重排元素、高效分配剩余空间。 核心概念： • 弹性容器（flex container）— 设置 display: flex 的父元素，其直接子元素自动变为弹性项目。 • 主轴（main axis）— 项目沿着的排列方向，由 flex-direction 控制（row | row-reverse | column | column-reverse）。 • 交叉轴（cross axis）— 垂直于主轴的方向。对齐由 align-items（单行）和 align-content（多行）控制。 • justify-content — 控制项目在主轴上的对齐方式，选项有 flex-start、flex-end、center、space-between、space-around、space-evenly。 • align-items — 控制项目在交叉轴上的对齐，有 stretch、flex-start、flex-end、center、baseline。 • flex-wrap — 控制是否换行（nowrap | wrap | wrap-reverse）。 • gap — 项目之间的间距，替代了 margin hack 的需要。 单个弹性项目还可以通过 flex-grow、flex-shrink、flex-basis、align-self 和 order 单独控制。简写 flex: 1 等价于 flex: 1 1 0%。 浏览器支持全面——所有现代浏览器都已原生支持 flexbox，无需前缀。
使用方法
- 打开 CSS Flexbox 生成器，画布上会显示一个带有几个子项的示例容器。
- 设置容器属性：选择 flex-direction（行或列），从下拉菜单选择 justify-content 和 align-items，如需换行则开启 flex-wrap。
- 调整间距：使用 gap 滑块统一设置项目间距，或为单个项目设置自定义 margin/padding 值。
- 配置子项：分别为每个 flex 项目设置 flex-grow、flex-shrink、flex-basis 值，或使用简写方式。改变 order 值可以在不修改 HTML 的前提下重排视觉效果。
- 实验对齐覆盖：在单个项目上使用 align-self 来覆盖该元素上容器的 align-items 设置。
- 复制生成的 CSS 输出代码，包含 display: flex 及所有配置属性。粘贴到你的样式表中即可。
计算示例
输入: 方向: row, 对齐: space-between, 居中: center, 间距: 16px
过程: 设置主轴水平 → 等间距分布项目 → 垂直居中
结果: display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:16px
输入: 方向: column, 换行: wrap, 拉伸: stretch
过程: 垂直堆叠 → 允许换行 → 拉伸项目至全宽
结果: display:flex; flex-direction:column; flex-wrap:wrap; align-items:stretch
输入: 3个项目 flex-grow: 1, 2, 1
过程: 总增长比 = 1+2+1=4 → 项目1=25%, 项目2=50%, 项目3=25%
结果: 项目宽度: 25% | 50% | 25%
相关搜索
相关搜索：css, flexbox, flex, 布局, 对齐。
cssflexboxflex布局对齐
常见问题
flex 和 grid 有什么区别？
Flexbox 是一维布局，沿单轴（水平或垂直）排列项目。CSS Grid 是二维布局，同时控制行和列。导航栏、按钮组或内容居中等线性布局选 flexbox。整页布局、复杂卡片网格等需要精确行列控制的选 grid。实际项目中两者经常组合使用：grid 做页面整体结构，flexbox 做组件级对齐。
如何用 flexbox 实现居中？
在父容器设置 display: flex，然后设 justify-content: center（水平居中）和 align-items: center（垂直居中）即可。无需绝对定位、不需要负 margin、不用 JavaScript。这就是 flexbox 最典型的用例，所有浏览器都支持。如果只有一个子元素居中，这种方式比任何其他方案都更简单可靠。
flex: 1 到底是什么意思？
flex: 1 是 flex: 1 1 0% 的简写，即 flex-grow: 1、flex-shrink: 1、flex-basis: 0%。表示元素根据需要伸缩，起始宽度为 0。当多个兄弟都设 flex: 1 时，它们会等分剩余空间。如果一个设 flex: 2 其余设 flex: 1，则前者的分配比例是后者的两倍。
什么时候用 gap 而不是 margin？
当需要在 flex 项目之间加间距时使用 gap（row-gap 和 column-gap）。gap 只在兄弟之间生效，不会在容器边缘产生额外间距。相比 margin 这是个关键优势——margin 会在首尾项也加上间距。有了 gap 就不再需要用 :last-child 伪类去除末尾间距了。所有现代浏览器自 2021 年起已全面支持。
不修改 HTML 能改变项目的视觉顺序吗？
可以！使用弹性项目的 order 属性。默认 order 值为 0。order 值小的排在前面，不受 HTML 源码顺序影响。比如设 order: -1 可把项目移到最前面。这在响应式设计中很有用——你可能希望侧边栏在移动端显示在内容下方但在桌面上并排。注意 order 只改变视觉渲染，不影响 DOM 顺序和键盘导航的 Tab 顺序。