使用align-content控制多行整体对齐，align-items控制每行内部对齐，结合flex-wrap: wrap实现换行布局。
当使用 CSS Flex 布局的子元素换行后，可以通过 align-content 和 align-items 来控制多行子元素之间的对齐方式。关键在于父容器设置 flex-wrap: wrap 后，再选择合适的对齐属性。
1. 使用 align-content 控制多行整体对齐
这个属性作用于多行 flex 行之间，决定它们在交叉轴（cross axis）上的分布方式。只有当容器内有多行 flex 项目时才生效。
常见取值包括：- flex-start：所有行堆在交叉轴起点
- flex-end：所有行堆在交叉轴终点
- center：所有行居中对齐
- space-between：行之间等距分布，首尾行贴边
- space-around：每行周围有相等空间
- space-evenly：所有行间隔完全均匀
示例：
.container {
display: flex;
flex-wrap: wrap;
align-content: center; /* 多行垂直居中 */
height: 300px;
}
2. 使用 align-items 控制每行内部对齐
该属性控制每一行中子元素在交叉轴上的对齐方式，适用于所有行。
立即学习“前端免费学习笔记（深入）”；
- flex-start：顶部对齐
- flex-end：底部对齐
- center：居中对齐
- stretch：拉伸填满容器（默认）
示例：
.container {
display: flex;
flex-wrap: wrap;
align-items: center; /* 每行子元素垂直居中 */
}
3. 单独控制某一行的对齐（使用伪类或分组）
Flexbox 本身不直接支持“按行”设置对齐，但可以通过给子元素分组来实现更灵活布局。
方法：用嵌套容器分组处理
<div class="container">
<div class="row">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="row">
<div>Item 3</div>
</div>
</div>
<p>.row {
display: flex;
justify-content: center; /<em> 每行独立控制 </em>/
width: 100%;
}</p>基本上就这些。关键是理解 align-content 管多行分布，align-items 管每行内部对齐。结合使用能应对大多数换行对齐需求。
