Flex容器默认不换行，需用flex-wrap控制：wrap启用换行，wrap-reverse反向换行，nowrap禁止换行；换行后align-content控制多行对齐，justify-content控制每行内对齐。
当 Flex 容器中的一行放不下所有子元素时，默认不会自动换行，所有项目会被压缩或溢出。解决的关键是使用 flex-wrap 属性控制换行行为。
启用换行：flex-wrap: wrap
这是最常用的方式，允许子元素在空间不足时自动换到下一行（或下一列，取决于主轴方向）。
- 设置在 flex 容器上：
display: flex; flex-wrap: wrap; - 主轴为水平（默认）时，新行从上到下堆叠；主轴为垂直时，新列从左到右排列
- 换行后，每一行（或列）都独立计算对齐方式（如
justify-content只作用于当前行）
反向换行：flex-wrap: wrap-reverse
与 wrap 行为一致，但新行/列会出现在原有内容的**反方向**。
- 主轴水平时，新行出现在上方（原第一行变最后一行）
- 主轴垂直时，新列出现在左侧
- 适合需要底部对齐、或右侧优先布局的特殊场景
禁止换行：flex-wrap: nowrap（默认值）
即使空间严重不足，所有项目也强制挤在同一行，可能造成内容截断或横向滚动。
立即学习“前端免费学习笔记（深入）”；
- 若想避免换行但又不想压缩内容，可配合
min-width: 0或overflow: hidden控制溢出表现 - 慎用在响应式布局中，尤其在小屏幕上容易导致体验问题
配合 justify-content 和 align-content 优化多行效果
flex-wrap: wrap 启用后，align-content 才会生效，用于控制**多行之间的对齐**（如行间距、上下分布）。
-
align-content: flex-start：各行顶部对齐（默认） -
align-content: center：多行整体居中（容器内垂直居中） -
align-content: space-between：首行顶、末行底，中间等距分布 -
justify-content仍控制**每行内部**的主轴对齐，不受换行影响
