Flexbox 布局练习场

选择主轴方向、主轴对齐、交叉轴对齐与换行策略,生成对应的 flex 布局代码。

Flex 参数 等待输入

主轴对齐对应 justify-content,交叉轴对齐对应 align-items。

布局代码
方向—
主轴—
交叉轴—
状态—
选择 Flex 参数后,点击“生成代码”查看布局代码。

生成的代码为常见组合示例,可直接复制到样式表。

使用说明
  • 生成代码为 display:flex 的常用属性组合。
  • 换行属性对应 flex-wrap。
  • 可直接复制使用。
  • 不作任何浏览器兼容性保证。
  • 全部在浏览器本地生成。