flex布局下flex:1无法实现等比例网格，因flex-wrap启用后子项按内容撑开；需用flex:0 1 calc(33.333%-12px)配合min-width和margin模拟gap，并禁用flex-grow以避免跨列拉伸。
Flex布局下用flex: 1无法实现等比例网格？
直接给子项设 flex: 1 看似能均分，但前提是父容器有固定宽度且子项不换行——一旦启用 flex-wrap: wrap，flex: 1 就失效了，子项会按内容宽度撑开，网格就塌了。
真正可行的等比例网格必须靠「固定基础宽度 + 自适应收缩」配合 min-width 控制换行点：
- 父容器设
display: flex和flex-wrap: wrap - 每个子项设
flex: 1 1 calc(33.333% - 12px)（以三列为例），同时加min-width: calc(33.333% - 12px) - 左右 margin 用
margin: 0 6px模拟 gap，避免gap在旧版 Safari 中不兼容
末尾行左对齐为什么justify-content: flex-start没用？
因为 justify-content 只作用于当前行内部；当最后一行子项数量不足时，它们仍会按默认的 justify-content: flex-start 排列——但你看到“居中”或“右偏”，其实是父容器剩余空间太大，而子项又被 flex-basis 锁死了宽度，视觉上像被挤到中间。
解决方法是让末尾行子项「不占满整行」，关键在两点：
- 去掉子项的
flex-grow: 1（即把flex写成flex: 0 1 calc(...)） - 确保父容器没有设置
justify-content: center或space-between - 用
margin-right: auto给最后一个子项「右侧清空」反而容易出错，不如直接控制列数和宽度计算
完整可运行的三列等比网格示例
.grid {
display: flex;
flex-wrap: wrap;
margin: -6px; /* 抵消子项的负 margin */
}
.grid > * {
flex: 0 1 calc(33.333% - 12px);
min-width: calc(33.333% - 12px);
margin: 6px;
}
说明：
-
flex: 0 1 ...表示不放大（flex-grow: 0），只允许缩小（flex-shrink: 1），避免跨列拉伸 -
min-width是换行触发器：当容器宽度不足以放下三列时，第三项自动折行 -
margin: -6px / 6px是为兼容无gap的写法，比gap: 12px更稳
IE11 和 Safari 14 以下的坑
老浏览器对 calc() 在 flex-basis 中的支持很脆弱，尤其 Safari 13.1 会忽略带空格的 calc(33.333% - 12px)。
绕过方式：
- 改用
flex-basis: 33.333%+ 单独设max-width: calc(33.333% - 12px)（但需额外 wrapper） - 更稳妥的是用媒体查询分段：小屏用
flex-direction: column，中屏用两列，大屏才三列，避开动态 calc - 如果必须单套代码兼容，建议放弃纯 Flex，改用
display: grid并 fallback 到 float（但那就不是本题范围了）
实际项目里，最后一行左对齐这件事，90% 的问题其实出在没意识到 flex-grow 在换行后已失去意义——它只管单行内分配，不管行与行之间怎么排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
