必须显式设置flex-wrap: wrap，否则子项总宽超容器也绝不会换行；这是flex默认行为而非bug，因flex-wrap默认值为nowrap，仅display: flex不启用换行逻辑。
必须显式设置 flex-wrap: wrap，否则哪怕子项总宽远超容器，也绝不会换行——这不是 bug，是 Flex 的默认行为。
为什么写了 display: flex 却还是一行挤满、不换行？
根本原因是没开换行开关：flex-wrap 默认值是 nowrap。浏览器会优先拉伸或压缩子项来填满单行，哪怕内容被压扁、溢出、出现横向滚动条，也坚决不折行。
- 常见错误现象：
.item { width: 25%; }但小屏下仍只显示一列；调小窗口宽度，布局毫无反应 - 验证方法：临时加
flex-wrap: wrap到父容器，看是否立刻开始换行 - IE10–11 需补前缀：
-ms-flex-wrap: wrap，现代项目可忽略
flex: 1 1 200px 比 flex: 1 更适合控最小列宽
只写 flex: 1 会让子项无条件均分剩余空间，失去最小宽度约束；而 flex: 1 1 200px 明确表达了“基准宽度 200px、允许拉伸、也允许收缩”，换行逻辑才能真正触发。
-
flex-basis: 200px单独写常无效——因为默认flex-grow: 1会抢走所有剩余空间，覆盖掉你设的基准值 - 想严格锁死最小宽度（比如卡片不能窄于 240px），用
flex: 0 1 240px，其中flex-grow: 0关闭拉伸 - 避免和
width混用：width会被flex-basis覆盖，且在 Flex 中语义重复
响应式列数靠 calc() 减去 gap，不是靠 margin
用 gap 控制间距最干净，但它不作用于容器边缘。所以每列真实可用宽度 = calc(33.333% - 20px)（假设 gap: 20px），而不是简单写 33.333% 或靠 margin-right 模拟。
- 错误写法：
flex: 1 1 33.333%→ 行末留白过大，最后一列右边距多出一倍 - 正确写法：
flex: 1 1 calc(33.333% - 20px)，配合gap: 20px，间隙均匀分布在列之间 - IE11 不支持
gap，此时需退化为margin-right: 20px+:last-child { margin-right: 0; }
align-items: flex-start 是处理高度不一致内容的关键
默认 align-items: stretch 会让所有列等高，结果是短内容的卡片底部被强行拉空——这不是对齐，是干扰。多数文章列表、卡片网格需要顶部对齐，而非视觉割裂的“等高假象”。
- 只要子项高度天然不一致（比如标题行数不同、图片尺寸不同），就应主动设
align-items: flex-start - 如果真需要等高（如产品对比表），再切回
stretch，但要意识到它会放大高度差异带来的空白感 - 这个属性只作用于交叉轴（column 布局下是水平轴），别和
justify-content搞混
最小宽度受控的本质，是让 Flex 知道“什么情况下该换行”——这取决于 flex-basis 是否可被尊重、flex-shrink 是否允许压缩、以及 flex-wrap 是否真正开启。三者缺一不可，而最容易被跳过的就是那个看似简单的 wrap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
