CSS Flexbox 弹性布局生成器

Flexbox 把项目沿一个方向（一行或一列）排列，并在它们之间分配剩余空间。大多数布局问题都可以归结为五个容器属性——flex-direction、flex-wrap、justify-content（主轴）、align-items（交叉轴）和 gap，再加上项目上的 flex 简写。这个生成器会写出这些规则和对应的 HTML，并由您自己的浏览器排布预览，让您清楚看到每个值的作用。

使用方法

1. 选择方向，以及项目是否可以换到新的一行。
2. 为主轴设置 justify-content，为交叉轴设置 align-items。
3. 设置间距和项目数量；也可以为项目单独指定 flex 值。
4. 复制 CSS 和 HTML。

计算公式

display: flex; flex-direction; flex-wrap; justify-content; align-items; [align-content]; gap · 项目：flex: <grow> <shrink> <basis>

justify-content 沿着行或列的方向起作用，align-items 则作用于与之垂直的方向。align-content 只在项目换成多行时才有意义。flex: 1 是 1 1 0% 的简写，所以都设为 flex: 1 的项目会平分空间。

示例

三个项目，设置 flex-wrap: wrap、justify-content: space-between 和 align-items: center，其中项目 1 为 flex: 2 1 0%、项目 3 为 flex: 1，则项目 1 分到两份剩余空间，项目 3 分到一份，项目 2 保持自身宽度。默认设置是 gap: 12px 的普通一行。