flex-wrap: wrap 是实现网格效果的必要前提，否则子项被强制单行挤压；需配合 display: flex 使用，结合 flex-basis、gap 和响应式约束才能稳定控制每行项目数。
flex-wrap: wrap 是实现网格效果的必要前提
不加 flex-wrap: wrap 的 flex 容器默认把所有子项强行压在一行，哪怕溢出容器或被压缩变形——这不是网格，是“单行挤压”。只有开启换行，才能让子项按宽度自动折行，形成视觉上的“行+列”结构。
常见错误现象：卡片宽度设为 flex: 0 0 25%，但始终只显示一行、内容横向滚动或被拉扁。根本原因就是漏了 flex-wrap: wrap。
- 必须配合
display: flex使用，单独写flex-wrap无效 - 值为
wrap（正常换行）或wrap-reverse（反向换行），nowrap是默认值，要显式覆盖 - 换行后，
justify-content只作用于每行内部，align-content才控制行与行之间的对齐
用 flex-basis 控制每项基础宽度，别只靠 flex-grow
想实现“每行 3 个卡片”，最直接的方式不是靠 flex: 1 均分剩余空间，而是用 flex: 0 0 calc(33.333% - 20px) 这类固定基准宽度 + gap 补偿的写法。否则在不同屏幕下容易出现 2 个或 4 个挤一行的情况。
实际场景中，flex-grow 适合做“自适应填满剩余空间”的动作（比如侧边栏+主内容），而网格布局更需要可预测的、基于容器宽度的等分逻辑。
-
flex: 0 0 33.333%表示不伸缩、不收缩、基础宽度占三分之一 - 若用了
gap: 20px，需用calc(33.333% - 20px)减去间隙影响，否则最后一项可能换行 -
min-width和max-width可进一步约束响应行为，比如min-width: 280px防止卡片过窄
gap 属性比 margin 更干净，但兼容性要注意
gap 是 flex 布局原生支持的间距属性，作用于项目之间，自动处理换行时的边缘空白问题。相比给每个子项加 margin-right/bottom 再用负 margin 清除外边距，它更直观、不易出错。
但老版本 Safari（iOS 14.4 之前）、IE 完全不支持 gap，如果项目需兼容这些环境，得回退到 margin 方案。
- 写法：
gap: 16px（等效于row-gap: 16px; column-gap: 16px） - 在 flex 中，
gap不会影响flex-basis计算，但 margin 会参与盒模型计算 - 若必须兼容旧浏览器，可用
margin+:nth-child(n)清除末尾项右/下 margin
Flex 网格本质是一维布局，复杂嵌套容易失控
Flex 擅长“单方向流式排列”，比如横向导航、纵向列表、卡片流式展示。但它没有 Grid 那种行列坐标系统，一旦需要精确控制某一项跨行/跨列、或定义多层嵌套网格（比如带侧边栏的仪表盘），Flex 就得靠多层嵌套容器硬凑，代码迅速变脆。
容易被忽略的是：当你发现需要给某个卡片加 order、再用 align-self 单独调位置、同时还要处理换行断点时，其实已经超出 Flex 的舒适区。
- 两栏布局、三列卡片流、顶部+主体+底部结构——Flex 很合适
- 商品详情页（左图右文+规格表格+评论区）、后台数据看板（多个不等高卡片按行列对齐）——优先考虑
display: grid - 混合使用没问题：外层用 Grid 划区域，内层用 Flex 排内容，这是现代布局的常见分工
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
