CSS Flexbox 生成器
通过图形界面调整 flex-direction、justify-content、align-items、flex-wrap 和 gap，一边查看实时预览一边试验 Flexbox 布局的免费工具。生成的 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 控制 Flexbox「主轴」方向（由 flex-direction 决定，默认是横向）的对齐方式，align-items 控制与主轴垂直的「交叉轴」方向的对齐方式。当 flex-direction 为 row 时主轴是横向，因此 justify-content 负责横向排列、align-items 负责纵向排列；但改为 flex-direction: column 后主轴变为纵向，这两个属性的作用会互换。
当 flex-direction 为 column 时，主轴变为纵向，因此使用 justify-content: center 可以实现纵向居中。若还需要横向（交叉轴方向）居中，则使用 align-items: center。两者结合即可在纵向堆叠布局中同时实现上下左右居中。
Flexbox 的 gap 属性在 2021 年前后 Chrome 和 Safari 的支持一度落后，但目前主流浏览器（Chrome 84+、Safari 14.1+、Firefox 63+）均已支持。如果必须兼容非常old的浏览器，可以考虑用 margin 作为替代方案。
flex-grow 用于指定容器有多余空间时项目应扩展多少来填补空白，flex-shrink 用于指定容器空间不足以容纳所有项目原始大小时项目应收缩多少。两者都是以项目的基准尺寸（flex-basis）为基础，决定多余或不足的空间如何分配。
一般来说，Flexbox 更适合「单一方向（一行或一列）排列的元素组」布局，例如导航栏或横向排列的卡片。而 CSS Grid 适合同时控制行与列的二维布局，例如整个页面的网格结构。简单的线性排列选择 Flexbox，需要复杂的网格状布局则选择 Grid。
闲话 ― 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 则负责「整个页面的网格状布局」。