flex-wrap: wrap 是卡片换行的必要前提，否则所有卡片强行挤在一行溢出容器；搭配 gap 可可靠控制行列间距，现代浏览器全支持，ie11 需回退至 margin 方案。
flex-wrap: wrap 是换行前提，不是可选项
不加 flex-wrap: wrap，所有卡片会强行挤在一行，溢出容器也不换行——这是初学者最常漏掉的一行。Flex 默认是 flex-wrap: nowrap，哪怕你写了 flex: 1 1 250px，浏览器也只当“尽量压缩，但绝不折行”。
必须显式声明：flex-wrap: wrap，之后卡片才会根据父容器宽度自动折行。搭配 gap 使用时，它同时控制行内和行间间距，比老式 margin 更可靠。
- 别用
margin-right/bottom模拟间隙：最后一行右侧、最后一列底部容易错位 -
gap在现代浏览器（Chrome 104+、Firefox 103+、Safari 14.1+）中已全支持，无需前缀 - 若需兼容 IE11，改用
display: -ms-flexbox+-ms-flex-wrap: wrap，并退回margin控制间距
flex: 1 1 250px 中三个值的真实含义
flex 是 flex-grow、flex-shrink、flex-basis 的简写，顺序不能错。写成 flex: 1 1 250px 表示：
-
flex-grow: 1：空间富余时，卡片可等比例拉伸（比如容器宽 1200px，3 张卡各占约 400px） -
flex-shrink: 1：空间紧张时，卡片可等比例收缩（比如小屏下缩到最小flex-basis） -
flex-basis: 250px：初始主轴尺寸，即“建议最小宽度”，不是固定宽度
关键点：这个值不是“每张卡必须 250px”，而是告诉浏览器“按这个尺寸做基准去算”。实际渲染宽度由容器、gap 和可用空间共同决定。如果你发现卡片在中屏（如 900px 宽）下只排两列，通常是因为 flex-basis 设得偏大，可尝试下调至 220px 或改用 calc(33.33% - 16px)（配合 gap: 16px）。
等高卡片靠 align-items: stretch，但有三个硬性条件
想让同一行的卡片高度一致，直接依赖 align-items: stretch（Flex 容器默认值）就行，但以下三点任一不满足，就会失效：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器没设
display: flex—— 只给卡片本身加display: flex没用 - 某张卡片写了
height、max-height或min-height—— 这会锁死高度计算路径 - 卡片内部用了
position: absolute的标题/按钮 —— 内容脱离文档流，不参与高度撑开
另外注意：flex-wrap: wrap 启用后，align-items: stretch 只对**当前行内子项**生效。第二行卡片不会和第一行对齐。如果必须跨行等高，得结构上分组，例如每 3 张包一层 .card-row，每层单独设 display: flex。
移动端单列不是靠 flex: 1 1 100%，而是靠断点重置 flex-basis
在 @media (max-width: 480px) 下写 .card { flex: 1 1 100% } 能实现单列，但更稳妥的做法是只重置 flex-basis：
@media (max-width: 480px) {
.card {
flex-basis: 100%;
}
}
原因：保留 flex-grow 和 flex-shrink 原值（通常是 1），避免因重写整个 flex 简写而意外覆盖其他行为；同时语义更清晰——“只改基础宽度，其余弹性逻辑不变”。
同理，平板断点（如 768px）常用：flex-basis: calc(50% - 12px)（假设 gap: 12px），确保两列严丝合缝。
真正容易被忽略的是 box-sizing: border-box。所有卡片和容器都该全局加上：* { box-sizing: border-box; }，否则 padding 和 border 会额外增加宽度，导致计算偏差、换行错乱或间隙不均。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
