仅靠flexbox实现真正自适应网格可行但有边界：它仅支持一维流式排列，无法像grid那样控制行列二维关系；内容高度差异大或需跨行对齐时易视觉错位。
仅靠 Flexbox 实现真正自适应的网格系统，是可行的，但有明确边界：它只能做一维流式排列，不能像 Grid 那样控制行列二维关系；一旦内容高度差异大、或需跨行对齐，就会出视觉错位。
为什么 flex-wrap + calc() 是 Flex 自适应网格的底线方案
Flexbox 本身不提供“列数自动计算”能力，必须靠 flex-wrap: wrap 触发换行，再用 calc() 手动算出每个子项宽度。浏览器不会帮你判断“这里该放几列”，你得告诉它：“每项占容器宽的 1/3 减去间隙”。
常见错误现象：flex: 0 0 33.33% 在小屏下变成三列挤在一起、文字换行后高度突变、最后一行右边多出 margin（因没排除）。
- 必须统一用
box-sizing: border-box，否则 padding/border 会让calc()算错实际占用空间 - 间隙不能靠子项
margin模拟——要写成calc(33.33% - 12px)这类形式，且 gap 值需在所有断点中保持一致逻辑 - 移动端优先时，建议默认设为
flex: 0 0 100%，再在@media中逐步加列，避免小屏误渲染多列
flex-wrap 下如何避免最后一行右空隙问题
这是 Flex 自适应网格最常被忽略的坑：当子项用 margin-right 模拟列间距，最后一项仍会带这个 margin，导致右侧多出空白，甚至触发横向滚动。
正确做法是用 :nth-child(n) 排除最后一列，但注意——n 必须随列数动态变化，不能写死。例如 3 列布局，就要排除 :nth-child(3n) 的 margin-right。
- 更稳妥的解法是改用
gap（仅现代浏览器支持），但注意 Flexbox 的gap在 Safari 14.1+ 才稳定，旧版需回退 - 若必须兼容老浏览器，用
margin-bottom控制行间距 +margin-right配合:nth-child(3n)清除右空，比全靠calc()更可控 - 别在子项上同时设
width和flex，比如width: 300px; flex: 0 0 auto，这会让calc()失效且破坏换行逻辑
什么时候该放弃 Flex，切到 Grid
当你开始写第 2 个媒体查询来修正高度不一致导致的错位，或者发现需要让某个卡片跨两行、侧边栏在移动端移到顶部——这时候 Flex 已经在透支自己的一维本质。
- 内容高度不可控（如图文卡片含长标题+短描述）→
align-items: stretch会拉高整行，Flex 无行级约束能力 - 需要 DOM 顺序不变但视觉顺序重排（如移动端把广告区提到顶部）→ Flex 只能靠
order，但无法跨行调度 - 设计稿明确要求“等宽等高九宫格”，且容器宽高比固定 → Flex 对行高完全无感，Grid 的
grid-template-rows: repeat(3, 1fr)才是正解
Flex 实现自适应网格，核心是接受它“只管流、不管格”的事实。别试图用 flex-basis 模拟 minmax()，也别指望它自动响应内容尺寸变化——它响应的是你写死的百分比或 calc 值。真正的自适应弹性，从 auto-fit 开始，不在 flex-wrap 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
