卡片等宽布局需用calc()精确计算flex-basis，扣除margin等额外尺寸；flex-wrap失效多因父容器高度限制；响应式可用min-width触发自然重排；IE11应降级为固定列数。
卡片宽度用 calc() 算不准？别硬套 25% 或 33.333%
Flex 布局下卡片等宽排列，很多人直接写 flex-basis: 25%，结果在有 margin 或边框时错位、换行异常。根本原因是 flex-basis 是“内容区宽度”，不包含 padding/margin/border，而 calc() 里必须显式减掉这些额外尺寸。
正确做法是：先确定单张卡片的「总占用宽度」（含 margin），再反推 flex-basis。比如卡片间水平 margin 共 20px（左右各 10px），容器有 padding，那就得从 100% 里扣掉所有 margin 总和。
- 4 列布局，每卡左右 margin 各 10px → 每行共多占 60px（3 个间隙 × 20px）→ 单卡
flex-basis: calc((100% - 60px) / 4) - 用
box-sizing: border-box确保 padding/border 不撑大 width，否则还得额外减 - 避免用
%减px时漏单位（如calc(25% - 10)错误，必须是calc(25% - 10px)）
flex-wrap: wrap 不换行？检查父容器有没有设死高度或 min-height
卡片数量一多就溢出容器底部，不是 flex-wrap 失效，而是父容器被其他样式锁住了高度。常见于用了 height: 100vh 或 min-height: 100vh 却没预留滚动空间的场景。
Flex 容器默认主轴方向（row）溢出隐藏，交叉轴（column）才允许换行。只要子项总宽度超容器，flex-wrap: wrap 就会生效——前提是容器本身没被截断。
- 删掉父容器的
height或改用min-height（并确保内容能撑开） - 确认没有
overflow: hidden盖在 flex 容器上 - 移动端 Safari 对
vh计算有偏差，用dvh更稳（但兼容性需查）
响应式断点别只靠媒体查询，用 min-width + flex-basis 组合更轻量
为不同屏幕改列数，不用每个断点都写一遍 media query。利用 flex 项的最小宽度触发自然重排，更简洁也更符合流式逻辑。
原理是：当 flex-basis 计算出的宽度低于某个阈值（比如 280px），卡片就会被迫换行，列数自动减少。这时只需微调 flex-basis 的基准值，就能控制断点位置。
- 基础写法：
flex: 0 0 calc((100% - 60px) / 4)→ 4 列 - 加一句：
min-width: 280px→ 当视口缩到约 1180px 以下时，4 张卡放不下，自动变 3 列 - 再加
max-width: 100%防止超宽屏下单卡过宽
IE11 下 calc() 与 flex-basis 混用会崩？优先降级为固定列数
IE11 对 calc() 在 flex-basis 中的支持极差，尤其含百分比和 px 混合运算时，常解析为 0 或 NaN，导致卡片堆成一列。
别花时间 hack，IE 用户本就不该期待复杂响应式。直接给 IE 提供降级方案：用 @supports 隔离现代写法，对不支持的浏览器用简单等分（如 flex: 0 0 25%）+ JavaScript 补 margin。
- 检测写法：
@supports (flex-basis: calc(100% / 3)) { ... } - IE 下放弃动态计算，改用
flex: 0 0 33.333%+ JS 动态加 margin 类 - 注意：IE11 的
flex-wrap有渲染延迟，首次加载可能闪一下，无法完全避免
真正麻烦的不是怎么写，是 margin 和 gap 的责任归属——CSS gap 最干净，但老浏览器不支持；用 margin 就得所有人约定好谁清 margin、谁补 gap，不然父子组件一嵌套就乱套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
