flex-wrap: wrap 仅允许换行，不保证等宽；需用 calc() 配合 flex: 0 0 计算单列宽度（如 calc(25% - 12px)），并配合 align-content: flex-start 和 align-items: flex-start 解决最后一行拉高问题。
flex-wrap: wrap 是换行前提，不是自动等宽的保证
只写 flex-wrap: wrap 不会让子项自动变成四列——它只是允许换行，但每行放几个、宽度多少，完全取决于子项自身的 flex-basis 或 width。如果不控制单个子项宽度，哪怕容器再宽，也可能全挤在一行或错乱换行。
关键点在于：必须显式给每个子项一个“理想宽度”，且这个宽度要能随容器缩放、还要预留间隙空间。这时候 calc() 就不可替代。
用 calc() 算出真正可用的单列宽度
假设你希望始终最多显示 4 列，间隙用 gap: 16px（推荐），那么 4 列之间有 3 个间隙，总间隙宽为 48px。子项总可用宽度是 100% - 48px，单列就是 calc((100% - 48px) / 4)。
更健壮的写法是直接按比例减间隙：calc(25% - 12px)（因为每列“分摊”了 1/4 的间隙，即 16px × 3 ÷ 4 = 12px）——语义清晰，也方便后续改 gap 值。
- 务必配合
flex: 0 0 ...，禁用伸缩，否则calc()宽度会被覆盖 - 不要用
width单独设，它和flex共存时行为不一致，尤其在 Safari 中易失效 -
gap必须设在容器上，不能靠margin模拟，否则会干扰calc()计算
响应式断点里 calc() 参数要同步更新
一套 calc() 值撑不了所有屏幕。比如小屏下想切到 2 列，就不能还用 25% - 12px，得改成 calc(50% - 8px)（2 列 → 1 个间隙 → 16px ÷ 2 = 8px）。
媒体查询里必须重写整个 flex 值，而不是只改百分比：
.item {
flex: 0 0 calc(25% - 12px);
}
@media (max-width: 768px) {
.item {
flex: 0 0 calc(50% - 8px);
}
}
@media (max-width: 480px) {
.item {
flex: 0 0 100%;
}
}
- 别偷懒写成
width: calc(...)+flex: 1，这会导致小屏下内容撑宽、列数失控 - Android Chrome 对小数精度敏感，
33.333333%类写法在 4 列场景下容易因累积误差导致第 4 个子项掉行，坚持用整除逻辑（如 25%）更稳
最后一行高度突兀？align-content 和 align-items 得一起调
四列布局常出现最后一行被拉高——这不是 calc() 错，而是 flex-wrap 换行后，行框默认按 align-content: stretch 分布，空余空间被最后一行吃掉。
解决只需两行 CSS：
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* 行框顶部对齐，不拉伸 */
align-items: flex-start; /* 子项自身顶部对齐，防图片/文字撑高 */
}
- 漏掉
align-content，哪怕calc()算得再准，最后一行也会莫名变高 -
align-items: stretch（默认值）对 - 如果用了
gap，就别再给子项加margin，否则间隙翻倍，calc()白算
实际项目中最容易被忽略的，是把 gap 当装饰、把 calc() 当万能公式——它只负责宽度计算，对齐、收缩、内容干扰这些“隐性因素”，得靠 align-content、min-width: 0、flex-shrink: 0 一层层补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
