flex-wrap: wrap 是触发换行的必要条件，不设置则子项强制单行显示；wrap-reverse 仅改变新行堆叠方向而非元素顺序；多行对齐需配合 align-content，且须确保 box-sizing 和 gap 计算准确。
flex-wrap: wrap 是换行的开关，不设它就根本不会换
Flex 容器默认是 flex-wrap: nowrap，所有子项强行挤在一行里——哪怕溢出、文字折断、出现横向滚动条，也不会自动折行。这不是“没对齐”，而是压根没触发换行逻辑。必须显式写上 flex-wrap: wrap，浏览器才开始检查“这一行还能不能塞下下一个子项”。
- 只写
display: flex不够，这是最常见的漏配 -
nowrap下即使设了width: 100%或flex-basis，子项仍会被压缩或溢出 -
wrap后，换行判断依据是：当前行已用宽度 + 下一项的flex-basis（或width）是否超过容器可用宽度
wrap 和 wrap-reverse 的区别不是“顺序颠倒”，而是“新行插在哪”
flex-wrap: wrap-reverse 不会改变 DOM 顺序，也不调换子元素左右位置；它只影响“换行后新生成的行块”的堆叠方向：默认 wrap 是新行加在旧行下方（自上而下填充），wrap-reverse 是新行加在旧行上方（自下而上填充）。
- 视觉上看到“4 5 在上、1 2 3 在下”，其实是第 4 个元素触发换行，新行被插到顶部，原第一行被推到底部
- 要让多行整体靠顶部对齐，必须配合
align-content: flex-start（仅多行时生效） -
inline-flex会导致align-content失效，务必用display: flex
每行数量不是靠“数几个”，而是靠子项宽度 + gap 精确计算
想稳定控制每行显示 3 个卡片，不能只设 flex: 0 0 33.33%——因为 gap 也会占空间。3 个元素之间有 2 个 gap，所以实际每项应占：calc(33.33% - 2 * gap / 3)（更准确写法是 calc(33.33% - (2 * gap) / 3)，但常用近似值）。
- 没减去
gap占用 → 小屏下容易多出一列或换行错位 - 用
min-width配合flex-basis更健壮，例如flex: 1 1 calc(33.33% - 10px); min-width: 250px; -
box-sizing: border-box必须全局启用，否则边框和 padding 会让实际宽度超标，悄悄破坏换行节奏
换行后对齐行为分两层：行内对齐 vs 行间分布
justify-content 控制的是“单行内”的子项对齐方式（比如 space-between 让首尾贴边、中间均分），而 align-content 控制的是“所有行作为一个整体”在交叉轴（垂直方向）上的分布——但它只在真正有多行时才起作用。
立即学习“前端免费学习笔记（深入）”；
- 单行容器中设
align-content: center完全无效 - 设
justify-content: center+ 多行 → 每行都独立居中，结果是“第一行 3 个居中，第二行 1 个也居中”，看起来错位；此时应改用justify-content: flex-start+margin: auto给整行居中 -
align-content: stretch是默认值，会让所有行高度拉满容器（若容器有固定高度）
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
height: 300px; /* align-content 需要高度约束才可见效果 */
align-content: space-between; /* 多行时，行与行垂直间距均分 */
}
.item {
flex: 1 1 calc(33.33% - 10.66px); /* 3列，扣掉2个gap的均摊 */
min-width: 240px;
box-sizing: border-box;
}换行看着简单，真正踩坑的地方都在细节：是否写了 flex-wrap、gap 算没算准、box-sizing 有没有设、align-content 有没有配对多行场景——少一个，布局就可能在某个屏幕宽度下突然崩掉。
