CSS Flexbox生成器

什么是CSS Flexbox生成器？

如何使用CSS Flexbox生成器

1. 1

   拖拽调整参数：在左侧参数面板里，拖动对应 Flexbox 属性下方的滑块，或是在下拉选框中选中需要的属性取值，就能修改对应参数值

2. 2

   实时预览效果：拖动调整参数后，右侧预览区域会同步更新容器和子元素的布局效果，你可以直观看到不同参数带来的变化

3. 3

   复制生成代码：调整参数完成后，找到底部自动生成的CSS代码框，点击代码框右上角的『复制代码』按钮，就能把代码复制到剪贴板

什么场景会用到？

计算示例

注意事项

• 生成的代码只包含Flex容器本身的属性，不会包含容器内子项目的flex属性，需要自行给子元素补充规则。
• wrap属性仅在子元素总宽度超过容器宽度时生效，如果子元素总宽度不足，不会触发换行。
• flex-direction设置为column时，主轴对齐对应垂直方向，交叉轴对齐对应水平方向，和row方向的对应关系相反。
• 生成的代码使用标准CSS语法，不包含预处理器（Sass/Less）特有语法，可直接复制到项目中使用。

常见问题

参考资料

• MDN Web Docs 的 CSS Flexible Box Layout 文档
• W3C CSS Flexible Box Layout Module 官方规范

本页生成规则遵循W3C标准Flexbox语法，所有示例输出均经过工具实际运行复算，由工具集开发编辑组维护，属性对应关系和官方规范保持一致。