要控制Flex多行对齐，需先设置flex-wrap: wrap，再用align-content定义行间距分布方式，从而实现如居中、均匀排列等布局效果。
当使用 CSS Flex 布局时，子元素在容器中换行后的对齐方式由 align-content 属性控制，前提是容器启用了 flex-wrap: wrap 并存在多行内容。理解这两个属性的配合使用，能更精准地控制多行 Flex 容器内的布局效果。
flex-wrap 控制是否换行
默认情况下，Flex 容器中的子元素会排列在一行（或一列）内。要让子元素在空间不足时换行，必须设置 flex-wrap 属性：
- flex-wrap: nowrap — 不换行（默认值）
- flex-wrap: wrap — 换行，第一行在上方
- flex-wrap: wrap-reverse — 换行，第一行在下方
只有设置了 wrap 或 wrap-reverse，容器中才会出现多行 Flex 行，此时 align-content 才会生效。
align-content 控制多行对齐方式
当有多行 Flex 子项时，align-content 决定了这些行在交叉轴（cross axis）上的分布方式。常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start — 所有行堆叠在容器顶部（或起始边）
- flex-end — 所有行堆叠在容器底部（或末尾边）
- center — 所有行居中对齐
- space-between — 行之间等距分布，首尾行贴边
- space-around — 每行周围分配相等空间
- space-evenly — 所有行包括边缘间距完全均匀
- stretch — 行拉伸以填满容器（默认值，但受子项高度影响）
注意：align-items 控制的是每行内子项的对齐，而 align-content 控制的是行与行之间的对齐。
实际示例：网格式卡片布局
假设我们有一个响应式卡片容器，希望卡片自动换行，并且多行之间垂直居中对齐：
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
height: 400px; /* 固定高度以便看到效果 */
gap: 10px;
}
<p>.card {
width: 100px;
height: 80px;
background: #007acc;
color: white;
}</p>在这个例子中，如果卡片总高度未占满 400px，所有行会在容器中垂直居中排列。若改为 space-between，行之间会均匀拉开距离。
注意事项与兼容性
align-content 在单行 Flex 布局中无效。如果子项没有换行，即使设置了该属性也不会起作用。确保容器宽度足够小或子项总宽超过容器，才能触发换行。
现代浏览器均支持 flex-wrap 和 align-content，但在老版本移动端 WebView 中建议测试表现，必要时添加厂商前缀。
基本上就这些。只要记住：想控制多行对齐，先设 flex-wrap: wrap，再用 align-content 调整行分布，就能灵活实现各种多行布局效果。
