flex-flow: row wrap 仅启用换行，不控制行数；要实现稳定三行三列，须配合 flex-basis: calc(33.333% - 5.333px)、flex: 0 0 和 box-sizing: border-box 精确约束每项宽度。
flex-flow: row wrap 为什么不能直接撑满三行
很多人一上来就写 flex-flow: row wrap，指望子项自动排成「三行×三列」，结果发现：要么全挤在第一行，要么换行混乱，根本控制不住行数。这是因为 flex-wrap: wrap 只负责「按需换行」，不保证每行固定数量；它根据子项宽度和容器宽度动态折行，跟“三行”这个目标没直接关系。
真正能约束行数的是子项的宽度计算方式——不是靠 flex-flow，而是靠每个子项的 flex-basis 或显式宽度。
- 若用百分比，必须确保所有子项总宽 ≤ 100% 才可能单行排满；想强制三行，就得让每行最多放 3 个，即每个子项
flex-basis: calc(100% / 3)（或width: 33.333%） -
flex-flow: row wrap本身只是开启换行能力，不是布局模板，它不干预“几列几行”，只响应空间不足时的折行行为 - 如果子项有 margin、border、padding，而没设
box-sizing: border-box，实际占用宽度会超预期，导致提前换行甚至错行
用 flex-basis 实现稳定三行三列的关键参数组合
要让 9 个子项稳稳呈现为 3 行 × 3 列，核心是让每行恰好容纳 3 个，且不因内容撑开或缩窄破坏结构。推荐用 flex-basis + flex-grow: 0 + flex-shrink: 0 锁定尺寸：
- 父容器：
display: flex; flex-flow: row wrap; gap: 8px; - 每个子项：
flex: 0 0 calc(33.333% - 5.333px);（假设gap: 8px，两列间隙共 16px，均摊到每项减去约 5.333px） - 必须加
box-sizing: border-box，否则 padding/border 会让实际宽度超标 - 避免对子项设
width同时又设flex，二者冲突时以flex-basis为准，width可能被忽略
示例片段：
.grid-3x3 {
display: flex;
flex-flow: row wrap;
gap: 8px;
}
.grid-3x3 > * {
flex: 0 0 calc(33.333% - 5.333px);
box-sizing: border-box;
}
百分比宽度在 flex 容器中容易失效的三个场景
直接写 width: 33.333% 看似简单，但在 flex 布局里常被覆盖或误解：
- 当父容器是
display: flex且子项没设flex时，width仍生效；但一旦写了flex: 1或任何flex值，width就退居为flex-basis的初始值，后续伸缩由flex-grow主导 - 子项含内联文本或图片时，
min-width: auto（默认值）会阻止它压缩到 33.333%，尤其在窄屏下，可能把整行顶成两列 - 使用
vw或%时，若父容器高度未明确（如height: auto），百分比高度无效；但宽度百分比只依赖父容器宽度，一般没问题
响应式下从三行三列退化为单列的最小改动
不需要重写整个 flex 结构，只需在断点内调整子项的 flex-basis 和容器的 flex-flow：
- 小屏（如 max-width: 768px）下，把每项设为
flex: 0 0 100%，自然堆成单列 - 保留同一套
gap，视觉节奏不变 - 不要改
flex-flow为column——那会变成纵向排列，不符合“堆叠”预期；row wrap在单列下依然工作，只是每行一个
代码片段：
@media (max-width: 768px) {
.grid-3x3 > * {
flex: 0 0 100%;
}
}
注意：别漏掉 flex-shrink: 0，否则某些浏览器（如 Safari 旧版）在窄屏下仍可能压缩子项导致错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
