使用方法
- 为容器输入 类名，例如 toolbar。CSS 会把它用作类选择器。
- 选择 flex-direction、flex-wrap 以及各个对齐值。每一项都先显示其初始值。
- 设置 子项数量（1到12），然后设置每个子项的 flex-grow、flex-shrink 和 flex-basis。
- 查看 预览，再把 CSS 复制到样式表中，并把类名加到容器上。
容器属性
CSS 弹性盒布局模块第1级（英文）沿主轴排列弹性容器的子元素。flex-direction 选择主轴，flex-wrap 决定子元素能否换到新的一行。justify-content 沿主轴分布子元素，align-items 和 align-content 则在交叉轴上安排它们。
- flex-direction 的初始值为 row，可取 row、row-reverse、column 或 column-reverse。
- flex-wrap 的初始值为 nowrap，此外还可取 wrap 或 wrap-reverse。
- justify-content 的初始值为 flex-start，align-items 和 align-content 的初始值为 stretch。
子项属性
容器的每个子元素都是一个子项，它的三个弹性属性决定它能得到多少空间。flex-grow 的初始值为0，按系数比例分配剩余空间。flex-shrink 的初始值为1，表示空间不足时子项让出多少。flex-basis 的初始值为 auto，即使用子项本身的尺寸；长度或百分比则先设定一个尺寸。
flex: flex-grow flex-shrink flex-basis; 初始值：0 1 auto本工具不生成的内容
- order、align-self 和 gap 属性，您可以手动添加到容器或子项上。
- 超过第12个的子项：本工具最多处理12个子项，更长的列表需要手动编写规则。
示例：一个会换行的工具栏，共三个子项
类名为 toolbar，flex-wrap 为 wrap，justify-content 为 space-between，align-items 为 center。第一个子项保持初始值，因此没有规则。第二个子项放大以填满剩余空间，basis 为0。第三个子项保持其尺寸，basis 为200px。本工具只为第二和第三个子项写出规则。
| 子项 | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
常见问题
flex-grow 和 flex-basis 有什么区别？
flex-basis 是子项在分配剩余空间之前的起始尺寸。flex-grow 则决定剩余空间如何分配，按各子项的系数比例分配。basis 为0、grow 为1的子项会占用其他子项留下的空间。
为什么示例中的第一个子项没有规则？
它的值就是属性的初始值：flex-grow 为0，flex-shrink 为1，flex-basis 为 auto。浏览器无需规则也会使用这些值，因此本工具只为与之不同的子项写出规则。
为什么 align-items 的初始值是 stretch？
CSS 弹性盒布局模块规定 align-items 的初始值为 stretch，因此除非您选择其他值，子项会沿交叉轴填满空间。本工具从同一个值开始，使生成的 CSS 与浏览器在没有声明时的做法一致。
为什么 basis 只接受 px、rem、em 和百分比？
这些是本工具检查的单位。auto 或不带单位的0同样可以接受。其他单位，例如 vw，本工具不提供，如果您的布局需要，请手动编写。
我可以在子项之间添加间距吗？
本工具不提供。它只写出容器的五个属性和子项的弹性值。复制 CSS 之后，请手动把 gap 加到容器规则中。
我生成的 CSS 会被发送到什么地方吗？
不会。预览和 CSS 都在您的浏览器中生成，任何内容都不会被保存或发送到我们的服务器，因此离开页面前请先复制 CSS。
资料来源
数据和文字最近核对于2026年11月12日星期四。