flex-wrap: wrap 是换行开关，必须配合 flex-basis 和媒体查询才能实现可控响应式网格；仅设 flex-basis 不触发换行，因默认 nowrap 会导致溢出或压缩变形。
Flex 布局做响应式网格，flex-basis 是核心控制点，但光设它不够——必须配合 flex-wrap: wrap 和媒体查询，否则换行不会发生，或者换行位置完全失控。
为什么只设 flex-basis 却不换行
常见错误是给子项写了 flex-basis: 25%，但父容器没加 flex-wrap: wrap。此时 Flex 默认行为是 flex-wrap: nowrap，哪怕总宽远超容器，所有子项也会强行挤在一行，最终溢出或被压缩变形。
-
flex-wrap: wrap是换行的开关，缺它一切flex-basis计算都白搭 - 父容器必须有明确宽度（比如
width: 100%或max-width），否则 Flex 容器可能按内容撑开，失去“换行触发基准” - 避免同时写
width和flex-basis：CSS 中width会覆盖flex-basis，导致换行逻辑失效
flex-basis 怎么设才不踩坑
用百分比设 flex-basis 时，必须预留间隙空间，否则 4 × 25% = 100%，加上 gap 或 margin 就超了，第一张卡就会被挤到下一行。
- 推荐用
flex: 0 0 calc(25% - 16px)（四列、gap: 16px）——flex-grow: 0; flex-shrink: 0禁止伸缩，确保列宽严格按计算值分布 - 如果用
margin而非gap，要记得每行 n 列有 (n−1) 处间隙，比如四列需减3 * margin - Safari（尤其 ≤14.1）对
flex-basis解析更严格，只写width: calc()不起作用；必须用flex: 0 0 calc()
媒体查询中怎么改 flex-basis
不同断点下调 flex-basis 是最直接的响应方式，但要注意顺序和覆盖逻辑：
- 从大屏往小屏写，用
@media (max-width: 768px)这类递减写法，避免高优先级规则被低优先级覆盖 - 平板常用
flex-basis: calc(50% - 16px)（两列），手机用flex-basis: 100%（单列堆叠） - 别在媒体查询里只改
flex-direction：虽然row → column看似能“变网格为列表”，但它本质是一维滚动，卡片高度不一致时容易错位，不如老实用flex-wrap+flex-basis
gap vs margin：选哪个更稳
gap 是现代首选，但它不是万能解：
-
gap不参与子项宽度计算，用它时calc()只需算子项自身宽，不用扣间隙，写法更干净 - IE 完全不支持
gap；Safari ≤14.1 对flex-gap支持有限（仅grid-gap可靠），如需兼容旧环境，必须回退到margin + calc()方案 - 用
margin时注意外边距折叠问题，建议统一用padding包裹容器 +margin控制子项间距，避免意外塌陷
真正难的不是写对某一行 flex-basis，而是让所有断点下的换行线对齐、高度一致、不因图片加载延迟或文本长度差异而错位——这时候得加 min-height、align-items: flex-start，甚至用 aspect-ratio 锁定卡片比例。这些细节不显眼，但决定了用户滑动时是否觉得“卡顿”或“跳动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
