flex-wrap: wrap 是实现 Flexbox 多行布局的关键，需配合 flex-basis 或 width 控制每行元素数量，其本质是流式换行而非网格定位，与 Grid 有根本区别。
flex-wrap: wrap 是让 flex 项目换行的关键开关
默认情况下，flex-wrap 值为 nowrap，所有子元素会被强行压在同一行，哪怕溢出容器。要实现“多列显示”，核心不是靠列数声明，而是允许换行 + 控制单行能容纳多少个元素。
必须显式设置 flex-wrap: wrap（或 wrap-reverse），否则 justify-content 或宽度限制都无法触发分列。
- 只设
display: flex不够，不加flex-wrap: wrap就永远单行 -
flex-wrap: wrap后，子元素会按顺序从左到右填满一行，再自动跳到下一行（主轴方向为row时） - 换行后的新行，其交叉轴位置由
align-content控制（比如flex-start、center、space-between）
控制“每行几个”得靠子元素的 flex-basis 或 width
Flexbox 没有类似 CSS Grid 的 grid-template-columns: repeat(3, 1fr) 这种直接定义列数的语法。所谓“三列布局”，本质是让每个子项在主轴上占约 33.33% 宽度，并在容器宽度不足时换行。
推荐用 flex: 0 0 calc(33.33% - 20px) 这类写法，其中减去的是间隙（gap）的均摊值；若用 gap，则更干净：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.container > {
flex: 0 0 calc(33.333% - 6.666px); / 3列，gap=10px → 每行3个间隙共30px，均摊到3项各减10px，但实际需减 2/3gap ≈ 6.666px /
}
- 用
flex-basis比纯width更稳妥，它尊重 flex 缩放逻辑 - 如果子项内容长度差异大，建议加
min-width: 0防止文本撑宽破坏布局 -
移动端适配时，可配合媒体查询切换
flex-basis：比如小屏改calc(50% - 8px)实现双列
flex-wrap 失效的三个常见原因
明明写了 wrap 却还是不换行？大概率掉进以下坑里：
- 父容器没设宽度（尤其是
display: inline-flex或浮动父级），导致可用空间无限 → 永远不换行 - 子元素设置了
white-space: nowrap或含长不可断单词（如超长 URL），把自身宽度撑爆，间接阻止换行 - 用了
flex: 1或flex: auto—— 这会让子项优先拉伸占满剩余空间，而不是按需换行；应改用flex: 0 0
和 CSS Grid 多列布局的本质区别
Flexbox 的“多列”是流式换行结果，不是网格定位。这意味着：
- 第 2 行第 1 个元素，逻辑上仍是整个序列的第 4 个，无法像 Grid 那样用
grid-column: 1强制对齐首列 - 各行高度由该行最高子项决定（类似瀑布流），而 Grid 可统一行高
- 响应式列数切换时，Flexbox 需手动改
flex-basis，Grid 可用repeat(auto-fit, minmax(200px, 1fr)))自动计算
如果你需要严格对齐、跨行控制或复杂二维关系，别硬扛 flex-wrap —— 直接切 Grid。
