如何生成 CSS Flexbox 布局代码

设置方向、对齐、换行和间距后即可生成 CSS Flexbox 代码；未提供的配置会使用对应默认值。间距会以 px 后缀写入生成结果。

用途与适用场景

CSS Flexbox Generator 用于根据布局参数生成 CSS Flexbox 代码片段，适合准备容器样式、整理布局配置或快速建立可继续编辑的基础样式。你可以设置布局方向、主轴对齐、交叉轴对齐、换行方式和项目间距。工具的结果是代码，不是页面预览，也不会替你直接把布局应用到页面中。使用时，先明确容器希望采用横向还是纵向排列，再分别考虑两条轴线上的对齐方式、项目是否换行以及项目之间需要保留的间距。

操作步骤：生成 Flexbox CSS

1. 在对应的设置位置填写布局方向、主轴对齐方式、交叉轴对齐方式、换行方式和间距。方向可按布局需要填写，例如 row 或 column；其他配置也会按照你提交的内容写入生成结果，因此生成后应检查这些值是否符合预期。

2. 如果某项没有提供，工具会使用对应的默认值：方向为 row，主轴对齐为 center，交叉轴对齐为 center，换行为 nowrap，间距为 10。如果你只想快速获得基础片段，可以先保留这些默认设置，再根据页面结构调整。

3. 提交配置并生成 CSS。成功生成的结果会包含弹性布局声明，以及方向、主轴对齐、交叉轴对齐、换行和间距声明。将代码复制到自己的样式文件或合适的样式位置后，再结合页面结构检查实际布局。

4. 检查间距的写法。输入的间距值会以 px 后缀写入 CSS，例如输入 24 时，结果中的间距部分会显示为 24px。不要把额外的关键字参数当成布局配置；这类参数不会改变生成的 CSS 或报告的配置值。

结果解读与使用边界

生成结果是一个可继续编辑的 CSS Flexbox 代码片段。你提交的方向、对齐、换行和间距值会写入对应声明；未提供的项目则使用相应默认值。间距会带有 px 单位，所以读取结果时要区分输入的数值与生成 CSS 中的带单位写法。

这个工具侧重代码生成，不负责呈现页面效果。若复制代码后布局没有达到预期，还需要结合容器尺寸、子元素内容以及页面中的其他样式进行检查。生成器不会替你判断输入值是否适合目标 CSS，也不会把这些配置转换成另一种写法。额外提供的关键字参数同样不会改变生成结果。

使用示例

一个纵向卡片容器需要让项目沿主轴分散排列，并在项目之间保留 24 像素间距。

在方向中输入 column，将主轴对齐设为 space-between，将交叉轴对齐设为 stretch，保持换行配置为 nowrap，并把间距设为 24，然后生成 CSS。

结果应包含弹性布局声明，以及方向、主轴对齐、交叉轴对齐、换行和间距声明；间距部分应带有 24px。

使用限制

• 工具生成 CSS 代码片段，但不负责渲染、预览或直接应用布局；输入值会写入结果，不能据此认为工具会替你完成 CSS 适配检查。

常见错误

• 如果把间距填写成带有 px 的完整字符串，可能会得到不符合预期的结果，因为输入内容会直接写入 CSS，而间距结果还会追加 px。请填写间距数值，并生成后检查间距声明及其他配置值。

常见问题

不填写配置时会发生什么？

未提供方向时使用 row；未提供主轴对齐、交叉轴对齐、换行和间距时，分别使用 center、center、nowrap 和 10。

它会直接预览或应用 Flexbox 布局吗？

可以生成包含弹性布局、方向、两种对齐方式、换行和间距声明的 CSS 代码，但工具本身不负责渲染、预览或应用布局。

间距值在 CSS 中会如何显示？

输入的间距值会以 px 后缀写入 CSS，例如输入 24 时会形成 24px。其他配置值会按提交内容写入，因此使用前应检查生成结果。