flex-wrap 是实现多行 Flex 网格的关键开关，必须设为 wrap 才能换行；每行数量由子项 flex-basis 与容器宽度共同决定；justify-content 控制单行内主轴对齐，align-content 才控制多行间交叉轴对齐。
flex-wrap 是网格布局的关键开关
单纯用 display: flex 只能排一行，要实现多行网格（比如 3×3、4×2），必须开 flex-wrap: wrap。关着它，子项哪怕溢出容器也不会换行——这是最常被忽略的第一步。
注意：父容器需有明确宽度（或 max-width），否则子项可能全挤在一行里撑宽容器，看起来像没换行。
-
flex-wrap: wrap—— 换行，新行从主轴起点开始（默认左对齐） -
flex-wrap: wrap-reverse—— 换行，但新行堆在上一行“下方”（对 row 主轴来说，是从下往上叠） -
flex-wrap: nowrap（默认）—— 死也不换行，慎用
控制每行数量靠子项的 flex-basis + 容器宽度
Flex 网格没有“列数”属性，行内能塞几个，取决于每个子项的最小宽度（flex-basis）和父容器总宽。例如想实现 4 列，可设 flex-basis: 25%；3 列就用 flex-basis: 33.333%。
但百分比会受 gap 影响：如果加了 gap: 1rem，实际可用宽度变小，25% 可能刚好卡不住 4 个，导致最后一项掉到下一行。这时要么调小 flex-basis（比如 23%），要么用 calc() 精算：
立即学习“前端免费学习笔记（深入）”；
flex-basis: calc((100% - 3 * 1rem) / 4);
（3 * 1rem 是 4 项之间的 3 个 gap）
对齐问题：justify-content 和 align-content 要分清作用对象
justify-content 控制「单行内」子项的主轴对齐（如 space-between 让首尾贴边、中间等距）；而 align-content 才管「多行之间」的交叉轴对齐（比如让两行网格在容器里上下居中）。
常见误区：给多行 flex 容器设 justify-content: center，发现没效果——因为那只是把每行内部居中了，行与行之间还是顶着顶部。真要整体居中，得配 align-content: center，且前提是容器高度足够、有剩余空间。
-
align-content: flex-start（默认）→ 所有行堆在顶部 -
align-content: center→ 行组在容器交叉轴居中 -
align-content: space-between→ 首行顶、末行底，中间行等距
响应式网格靠媒体查询重设 flex-basis
移动设备上 4 列太挤？别写死像素值，用媒体查询动态改 flex-basis：
@media (max-width: 768px) {
.grid {
flex-wrap: wrap;
}
.grid > * {
flex-basis: 50%;
}
}
@media (max-width: 480px) {
.grid > * {
flex-basis: 100%;
}
}注意：不要只改容器的 flex-direction（比如切 column），那样会破坏自然文档流顺序，对语义和可访问性不友好。用 flex-basis + wrap 更稳妥。
真正难的不是写出来，而是当内容高度不一致时，如何让整行“等高”——这得靠 align-items: stretch（默认值），但前提是子项没设 height 或 min-height 覆盖它。
