登录 注册
登录 注册

CSS Flexbox 生成器

使用 CSS Flexbox 快速搭建一行或一列布局：选择主轴方向、换行方式、主轴与交叉轴对齐、行间对齐与 gap 间距，实时预览效果并生成可直接使用的完整容器 CSS 代码。

弹性布局参数 已就绪
flex-direction
flex-wrap
justify-content

align-content 仅在 flex-wrap: wrap 且出现多行时生效。

预览与代码
子项数—
方向—
换行—
配置参数后点击「生成布局」，CSS 代码将显示在这里。

生成的 CSS 可直接粘贴到样式表，容器类名为 .flex-container。

生成规则
  • 容器必备 display: flex;。
  • flex-direction 取 row / row-reverse / column / column-reverse。
  • flex-wrap 取 nowrap / wrap / wrap-reverse。
  • justify-content 取 flex-start / flex-end / center / space-between / space-around / space-evenly。
  • align-items 取 stretch / flex-start / flex-end / center / baseline。
  • align-content 取 stretch / flex-start / flex-end / center / space-between / space-around。
  • 以上取值均为 CSS Flexible Box Layout Module 的合法值，全部浏览器本地生成。