CSS Flexbox 布局教程
内容提要
CSS flexbox是一种一维布局方法，可以在一条横线或竖线上排列元素。flex容器的属性包括display、flex-direction、flex-wrap、justify-content、align-items、align-content、row-gap、column-gap和gap。flex项的属性包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。
延伸解读
理解主轴与交叉轴：对齐属性的基础
flexbox 布局中，主轴由 flex-direction 决定，交叉轴与主轴垂直。例如 flex-direction: row 时，主轴从左到右，交叉轴从上到下。justify-content 控制主轴对齐，align-items 控制交叉轴对齐。混淆这两条轴会导致对齐效果不符合预期，因此务必先明确方向再设置对齐属性。
flex 缩写：更简洁且合理的默认值
flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写，默认值为 0 1 auto。文章推荐使用 flex 代替单独设置这三个属性，因为它会自动应用合理的默认值。例如 flex: 1 会将 flex-grow 设为 1，同时 flex-basis 变为 0%。这能简化代码并避免遗漏。
flex-grow 与 flex-shrink：空间分配与收缩机制
当容器有多余空间时，flex-grow 按比例分配；空间不足时，flex-shrink 按比例收缩。两者默认值不同：flex-grow 默认为 0（不增长），flex-shrink 默认为 1（可收缩）。负值均无效。理解它们的计算方式有助于精确控制 flex 项在容器中的尺寸变化。
gap 与 align-content：多行布局的间隔与对齐
gap 属性设置 flex 项之间的最小间隔，row-gap 和 column-gap 分别控制行、列间隔。注意 gap 只是最小间隔，使用 justify-content: space-between 可以加大间隔。align-content 用于多行 flex 项的交叉轴对齐，仅在 flex-wrap 为 wrap 且产生多行时生效，单行时无效。
Q&A
什么是CSS Flexbox布局？
CSS Flexbox是一种一维布局方法，可以在一条横线或竖线上排列元素。
flex容器有哪些主要属性？
flex容器的主要属性包括display、flex-direction、flex-wrap、justify-content、align-items等。
如何使用flex-direction属性？
flex-direction属性用于定义排列方向，常用值有row、row-reverse、column和column-reverse。
什么是flex-wrap属性，它的默认值是什么？
flex-wrap属性控制是否换行，默认值为nowrap，表示不换行。
justify-content属性的作用是什么？
justify-content属性设置主轴的对齐方式，常用值包括flex-start、flex-end、center等。
flex项的order属性有什么用？
order属性可以改变flex项的排列顺序，默认值为0，数字越大位置越后。
