flex-wrap: wrap 是响应式网格的开关，不启用则子项强制单行溢出；必须显式声明，配合明确父容器宽度、子项可收缩、box-sizing: border-box 及 gap 控制间距。
flex-wrap: wrap 是响应式网格的开关
不启用 flex-wrap: wrap，再宽的容器也只会强行把所有子项挤在一行，溢出或横向滚动。这是实时预览中布局“卡死”最常见原因——你改了子项宽度，但容器仍默认 nowrap，结果什么都没变。
必须显式声明：flex-wrap: wrap，且父容器不能设 white-space: nowrap 或 overflow: hidden 隐藏换行痕迹。现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+）都支持，无需前缀。
- 子项总宽度超过容器时，自动折到下一行，不依赖媒体查询
- 折行后，每行高度由该行最高子项决定，天然等高
- 若想控制最小列数，用
min-width替代百分比宽度（如min-width: 280px），更可靠
子项宽度必须用固定值或 min-width，别碰 flex-basis 百分比
用 width: 33.333% + margin 做三列？大概率在某些视口宽度下错位或单列显示。因为 margin 和 border 会叠加进总宽度，而浏览器对小数像素的舍入误差会被放大。
正确做法是让子项尺寸“刚性”：要么设明确 width（如 width: 280px），要么用 flex: 0 0 minmax(280px, 1fr) ——但后者需配合 display: flex 容器且慎用 1fr，否则破坏“固定尺寸”前提。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
flex: 0 0 280px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 280px） - 避免
flex: 1、flex: auto或任何含1fr的写法，它们会让子项拉伸，违背“固定尺寸自动换行”初衷 - 务必加
box-sizing: border-box，否则 padding/border 会撑大实际占用空间
gap 比 margin 更适合控制网格间距
用子项 margin-right 和 margin-bottom 实现间隙，会在每行末尾、每列底部多出空白，导致容器不对齐或滚动条意外出现。实时预览里这种问题特别刺眼。
gap 是 Flexbox（和 Grid）原生间距属性，只作用于项目之间，不污染外边距。它在 Chrome 84+、Firefox 63+、Safari 14.1+ 已全面支持；旧版 Safari 可用 row-gap/column-gap 分写。
- 写法统一：
gap: 16px（等效row-gap: 16px; column-gap: 16px） - 不用再给子项写
margin，也不用 nth-child 去掉最后一项的 margin - 如果必须兼容 Safari 13.1 及更早版本，可双写：
gap: 16px; row-gap: 16px; column-gap: 16px
HTML 结构必须扁平，子项得是同一父容器的直系子元素
实时预览中常看到这样的结构：<div class="grid"><div><div class="item">A</div></div><div><div class="item">B</div></div></div>。即使 CSS 写对了，.item 也不是 .grid 的直接子元素，Flexbox 规则根本不会应用到它们身上。
Flex 布局只作用于“弹性容器的**直接子元素**”。嵌套一层 wrapper 就断链，浏览器不会向上冒泡查找。
- 正确结构：
<div class="grid"><div class="item">A</div><div class="item">B</div></div> - 如果语义需要分组（如卡片含标题+内容），用
<figure>或<article>作为.item，不要额外包<div> - 检查 DevTools 元素面板，确认每个
.item的父节点确实是.grid，而不是某个中间<div>
真正容易被忽略的是子项的 flex-shrink 默认为 1——当容器窄于所有子项总宽时，它们会集体压缩变形，而非干净换行。所以 flex: 0 0 auto 或具体像素值才是稳态基础。
