Flexbox 布局生成器

在页面中依次设置以下选项，右侧预览区域会实时展示 4 个方块的排列效果，底部代码框同步生成对应的 CSS：

• flex-direction：选择主轴方向，可选 row（水平）、row-reverse（水平反向）、column（垂直）、column-reverse（垂直反向）。
• 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：输入数值（px）设置子元素间距。

调整完成后，点击「复制 CSS」按钮即可将生成的 .container 样式代码复制到剪贴板，直接粘贴到项目样式表中使用。

本工具是纯前端的 Flexbox 布局可视化生成器，无需记忆各个 CSS 属性名和取值，通过下拉选择和数字输入即可组合出常见的弹性布局方案。

• 预览区实时渲染 4 个编号方块，直观展示 flex-direction、justify-content、align-items、flex-wrap、gap 五个属性叠加后的真实排列效果。
• 底部代码框实时同步生成格式化的 .container { display: flex; ... } CSS 代码块。
• 一键复制功能可直接将代码写入剪贴板，无需手动选中文本。
• 所有交互均在浏览器本地完成，不上传任何数据。