flex-grow 不控制每行个数，仅分配剩余空间；要实现每行数量不固定，须用 flex-basis 配合 flex-wrap: wrap，由基准宽与容器宽比值动态决定换行时机。
flex-grow 本身不控制“每行几个”，它只分配剩余空间；想让每行元素个数不固定，就得放弃对数量的硬性约束，转而让子项宽度可变、靠 flex-wrap: wrap 和 flex-basis 自动折行——这是响应式布局的真实逻辑。
为什么 flex-grow: 1 一加就全挤在一行？
因为 flex-grow: 1 会让子项拼命拉伸占满主轴剩余空间，其他兄弟没地方放，flex-wrap: wrap 就永远不触发。常见于卡片列表、按钮组等场景，本意是“自适应宽度”，结果却变成“死扛不换行”。
- 子元素写
flex-grow: 1+flex-shrink: 1（默认）时，浏览器优先拉伸/压缩它们来填满整行，而不是换行 - 父容器没设
flex-wrap: wrap，或写了但被flex-grow抢先吃光空间 - 子元素用了
min-width但值太大（比如min-width: 300px），导致小屏下根本塞不下两个，只能单列，误以为“个数固定”
要“个数不固定”，得用 flex-basis + flex-wrap 配合
真正决定换行时机的是子项的基准宽度（flex-basis）和容器宽度的比值。只要这个比值变化，每行数量自然浮动——这才是“不固定”的本质。
- 推荐写法：
flex: 0 1 auto（不放大、可缩小、基准按内容宽），再加min-width: 240px这类约束 - 若需更可控，用
flex-basis: 250px（固定像素）比百分比更稳，避免因父宽计算误差导致错行 - 配合
gap控制间距，别用margin，否则换行后首项可能多出空隙 - 移动端注意：iOS Safari 软键盘弹出会压缩视口，
100vh失效，影响容器高度 → 改用min-height: 100dvh
flex: 1 和 flex-grow: 1 在换行场景下必须分清
很多人抄代码时直接把侧边栏的 flex: 1 套到列表子项上，结果全卡死在一行。关键区别在于：flex: 1 是 flex: 1 1 0%，而 flex-grow: 1 单独写等于 flex: 1 1 auto —— 后者那个 auto 会按内容撑开初始宽度，极大提高单行概率。
立即学习“前端免费学习笔记（深入）”；
- 需要换行 → 避免单独写
flex-grow: 1，改用flex: 0 1 max-content或显式设flex-basis: 0 - 真要等分剩余空间（如三栏布局），才用
flex: 1，且确保父容器宽度明确、无flex-wrap干扰 - 文本类子项记得加
min-width: 0或overflow: hidden，防长单词顶破flex-basis计算
最常被忽略的一点：所谓“每行个数不固定”，不是靠 JS 算数量，而是靠 CSS 对 flex-basis 和容器尺寸的实时重排。一旦你开始手动设 flex-basis: 33.333% 或 25%，就已经在隐式固定列数了——那只是“看起来不固定”，实际是百分比四舍五入导致的偶然浮动。
