使用flex-wrap控制换行，justify-content设置主轴对齐，align-items定义交叉轴对齐，align-content处理多行分布，align-self单独调整子元素对齐方式。
在css中使用Flexbox布局时，容器的子元素可以通过设置换行和对齐方式实现灵活的排版。下面介绍如何控制flex子元素的换行与对齐。
flex容器开启换行
默认情况下，flex容器中的子元素会尽量在同一行显示。如果内容超出容器宽度，可以使用 flex-wrap 属性让子元素换行。
常用取值：
- nowrap：不换行（默认）
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
示例：
.container { display: flex; flex-wrap: wrap; }
这样当子元素总宽度超过容器时，后面的元素会自动折到下一行。
立即学习“前端免费学习笔记（深入）”；
主轴方向对齐（justify-content）
通过 justify-content 控制子元素在主轴（默认为水平方向）上的对齐方式。
常见值：
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，中间间距相等
- space-around：每个项目两侧间距相等
- space-evenly：所有间距完全相等
交叉轴对齐（align-items 与 align-content）
align-items 设置单行中子元素在交叉轴（垂直方向）的对齐方式：
- flex-start：顶部对齐
- flex-end：底部对齐
- center：垂直居中
- stretch：拉伸填满容器（默认）
- baseline：基线对齐
align-content 则用于多行情况，控制多行整体在交叉轴上的分布：
- flex-start：各行向顶部堆叠
- flex-end：向底部堆叠
- center：居中堆叠
- space-between：行间间距相等，首尾贴边
- space-around：每行上下有相等间隙
- stretch：拉伸行高以填满容器
注意：只有当 flex-wrap: wrap 且有多行时，align-content 才生效。
单个子元素对齐（align-self）
如果想让某个子元素与其他元素对齐方式不同，可用 align-self 单独设置。
例如：
.item-special { align-self: center; /* 垂直居中，其他元素顶部对齐 */ }
它会覆盖容器的 align-items 设置。
基本上就这些。掌握 flex-wrap、justify-content、align-items 和 align-content 的配合使用，就能灵活处理各种换行与对齐场景。不复杂但容易忽略细节。