什么是 Flexbox 布局生成器
Flexbox 布局生成器是一款可视化设计工具，旨在帮助用户直观地配置 flex 容器及其子项目。通过在控制面板中调整各项属性，用户可以实时观察布局的变化，并一键复制生成的 CSS 代码，从而快速完成网页设计。
该工具非常适合以下人群使用：
- 想要通过可视化方式设计 CSS flexbox 布局的用户；
- 需要快速为 flex 容器和项目生成 CSS 代码的开发者；
- 希望直观理解不同 flexbox 属性对布局实际影响的学习者；
- 正在构建常见布局（如居中元素、导航栏、纵向堆叠、卡片网格或侧边栏）的设计人员。
容器属性配置
在“容器”面板中，用户可以调整影响整个 flex 布局的全局属性：
- 排列方向：支持“横向”、“横向反转”、“纵向”以及“纵向反转”。切换排列方向会使主轴与交叉轴发生对调，从而改变“主轴对齐”和“交叉轴对齐”的具体作用方式。
- 换行：可选择“不换行”、“换行”或“反向换行”。在“不换行”状态下，所有项目会被强行挤在单一行内；而开启“换行”后，超出容器宽度的项目会自动折行到下一行。
- 主轴对齐：用于控制项目在主轴上的分布，选项包括“起始”、“末尾”、“居中”、“两端对齐”、“环绕分布”和“均匀分布”。
- 交叉轴对齐：控制项目在交叉轴上的对齐方式，可选“起始”、“末尾”、“居中”、“拉伸”和“基线”。
- 多行对齐：当开启换行且项目折行时，此属性用于控制多行作为一个整体在容器中的间距分布。选项包括“起始”、“末尾”、“居中”、“拉伸”、“两端对齐”、“环绕分布”和“均匀分布”。
- 间距：通过输入一个数值，直接设定项目之间以及行与行之间的空隙。
项目属性配置
在“项目”面板中，用户可以对单个项目进行个性化微调。点击“添加项目”按钮可以向容器中新增项目（例如“项目 5”）。每个项目可配置的属性包括：
- 顺序：输入数值来定义项目在布局中的排列顺序。
- 放大：输入数值来定义项目在容器有剩余空间时的放大比例。
- 缩小：输入数值来定义项目在空间不足时的缩小比例。
- 基准尺寸：可输入数值或设为“自动”。
- 单独对齐：允许单个项目覆盖容器的交叉轴对齐设置，可选“自动”、“起始”、“末尾”、“居中”、“拉伸”或“基线”。
实时预览与 CSS 代码输出
本工具提供实时的可视化预览，用户在控制面板中进行的任何修改都会立即呈现在画面上。
在“CSS”输出区域，工具会实时生成对应的 CSS 代码。为了保持代码的简洁性，只有属性被修改过的项目才会单独生成其专属的 CSS 规则。点击“复制 CSS”按钮后，按钮状态会变为“已复制”，方便用户直接将代码粘贴到自己的项目中使用。
隐私与数据处理
本工具充分保护用户的隐私。所有的布局配置与代码生成均直接在用户的浏览器中完成，用户在工具中设置的任何内容都不会上传。
常见问题
主轴对齐（justify-content）和交叉轴对齐（align-items）有什么区别？
“主轴对齐”沿主轴（项目排列的方向）分配项目，而“交叉轴对齐”则控制项目在另一条轴上的位置。当把排列方向从“横向”改为“纵向”时，主轴和交叉轴会发生对调，此时“主轴对齐”将影响上下方向的排列，而“交叉轴对齐”则影响左右方向的对齐。
单个项目的控制项怎么用？
用户可以选中特定的项目，并为其设置“放大”、“缩小”、“基准尺寸”以及“单独对齐”方式。“顺序”属性可以改变项目在画面上的排列位置，而无需修改 HTML 结构。需要注意的是，只有属性被实际修改过的项目，才会在生成的 CSS 中拥有独立的规则。
换行和多行对齐（align-content）什么时候起作用？
在“不换行”模式下，所有项目都会被强制挤在同一行中，并可能被压缩变窄。一旦开启“换行”，放不下的项目会自动掉落到下一行。此时，“多行对齐”属性才会生效，用于控制多行作为一个整体在容器中的间距。此外，“间距”属性可以用来设定项目之间以及行与行之间的空隙。