CSS Flexbox 生成器
通过图形界面调整 flex-direction、justify-content、align-items、flex-wrap 和 gap，一边查看实时预览一边试验 Flexbox 布局的免费工具。生成的 CSS 代码可一键复制。
边动手边搭 Flexbox 布局
Flexbox 是沿着一条轴线排布元素的布局之法。本工具让您在画面上切换 `flex-direction`、`justify-content`、`align-items`、`flex-wrap` 与 `gap`，边改边看结果，并把写成的 CSS 直接复制出去。
**在 Flexbox 上栽跟头，几乎都栽在「`justify-content` 与 `align-items` 各朝哪个方向使劲」这一点上。** 前者管**主轴**上的排布，后者管**交叉轴**上的排布。棘手之处在于：**`flex-direction` 由 `row` 改作 `column` 的那一刻，这两条轴便对调了。** 元素并排时管水平方向的 `justify-content`，一旦改为纵向堆叠，管的便成了垂直方向。多数「怎么也居不了中」的抱怨，**不过是没留意该改的属性已经换了一个罢了。**
使用方法
- 从预设起步 居中、两端对齐、纵向堆叠等常用样式都已备好。
- 切换 flex-direction **在 `row` 与 `column` 之间来回，轴的对调便看得一清二楚。**
- 试一试对齐的属性 依次改动 `justify-content` 与 `align-items`，确认各自如何使劲。
- 复制生成的 CSS 排布中意之后，便可原样贴进您的代码。
用好本工具的小技巧
- justify-content 用于「主轴」方向的对齐，align-items 用于「交叉轴」方向的对齐。将 flex-direction 设为 column 后主轴变为纵向，这两个属性的视觉效果会互换。
- 「居中对齐」预设组合了 justify-content: center 与 align-items: center，是用 Flexbox 实现水平垂直双向居中最常见的写法。
- gap 属性只在项目之间添加间距，不会影响容器外侧的空白（margin）。与 margin 不同，它能让相邻项目之间保持均匀的间隙而不影响边缘留白。
- 为单个项目设置 align-self 后，该项目会忽略容器整体的 align-items 设置，适合让某一个元素单独呈现不同的对齐方式。
- 启用 flex-wrap: wrap 后，超出容器宽度（column 模式下为高度）的项目会自动换到下一行，是响应式卡片布局中常用的技巧。
这些场景会用到
搭一条导航栏
**标志居左、菜单居右，正是 `justify-content: space-between` 的典型用场。**
把卡片等距排开
用 `gap` 便省去了为求间距均匀而抵消 `margin` 的那些小把戏。
把元素放在正中
**把 `justify-content` 与 `align-items` 都设为 `center`，是最短的路。**
学习 Flexbox
改一个值看一眼结果，比读多少说明都学得快。
Flexbox 的术语
- 主轴
- 元素排布所沿的方向，由 `flex-direction` 定下。**`row` 时为水平，`column` 时为垂直。**
- 交叉轴
- 与主轴成直角的方向。**主轴一对调，它也随之对调。**
- justify-content
- 管**主轴上**的排布，提供居中、两端对齐、均匀分布等。
- align-items
- 管**交叉轴上**的排布。在默认的 `stretch` 之下，子元素会长到满高。
- flex-wrap
- 决定放不下的元素是否换行。留作 `nowrap` 则被压缩着塞进去。
- gap
- 元素之间所留的空隙。**与 `margin` 不同，它不会在外缘添出多余的空隙。**
常见问题
闲话 ― Flexbox 如何改变 CSS 布局的历史
在 CSS Flexbox（正式名称为 CSS Flexible Box Layout Module）出现之前，网页的横向布局通常依靠 float 属性实现。然而 float 原本是为了让文字环绕图片而设计的功能，并非用于布局，因此用它来做布局需要许多变通手段，其中最著名的就是防止父元素高度塌陷的「clearfix」技巧。
W3C 于 2009 年发布了 Flexbox 的第一份草案，它专为「一维排列」布局而设计。过去需要多行 float 相关 CSS 技巧才能实现的效果——如让元素沿主轴伸缩、均匀分配空间、实现垂直居中——如今只需 justify-content、align-items 等声明式属性即可完成。
大约在 2015 年前后，主流浏览器完成了对 Flexbox 的实现，它迅速成为实现导航栏、卡片布局、表单对齐等常见网页设计模式的标准手段。「终于能用 Flexbox 实现垂直居中」在当时的前端开发者社区中尤其受到欢迎，因为这曾是 CSS 中公认最棘手的问题之一。
如今，Flexbox 与专注于二维布局的 CSS Grid 各司其职、共同存在：Flexbox 负责「沿单一方向排列的组件内部布局」，Grid 则负责「整个页面的网格状布局」。