flex-grow实现列宽弹性分配需父容器display: flex且子项无固定宽度；flex-grow:1均分剩余空间，与flex-grow:2共存时按2:1分剩余空间；响应式需媒体查询配合flex-direction切换或flex-wrap+flex-basis控制；flex-basis比width更适合因它是初始尺寸可被伸缩；IE11兼容需显式写flex:1 1 0px并降级备用样式。
flex布局中如何用flex-grow实现列宽弹性分配
直接靠flex-grow就能让多列按比例“抢”剩余空间，不需要算具体像素。它只在父容器设了display: flex且子项没设固定宽度（或设为flex-basis: auto）时才生效。
常见错误是给子项加了width或flex-basis固定值，导致flex-grow被压制；或者忘了给父容器设flex-wrap: wrap，导致小屏下溢出不换行。
-
flex-grow: 1表示均分剩余空间（注意：不是均分总宽，而是减去内容自然宽度后的剩余部分） -
flex-grow: 2和flex-grow: 1并存时，前者占剩余空间的2/3，后者占1/3 - 想保留最小内容宽度又允许撑开，推荐写法：
flex: 1 1 auto（即flex-grow: 1,flex-shrink: 1,flex-basis: auto）
如何让多列在小屏自动堆叠成单列
仅靠flex-grow无法响应式断点切换，必须配合媒体查询 + flex-direction重置。关键点在于：小屏下把flex-direction从row切到column，同时取消flex-wrap依赖，避免高度失控。
- 默认移动端优先写法：父容器先设
flex-direction: column，大屏再用@media (min-width: 768px)切回row - 若需保持水平排列但列数减少（如4列→2列），改用
flex-wrap: wrap+ 控制子项flex-basis，例如flex-basis: calc(50% - 10px)实现两列 - 慎用
flex: 1在小屏——它会让单列也强行撑满父容器高度，造成空白拉伸
为什么flex-basis比width更适合做响应式列基准
width是绝对约束，会直接覆盖flex-grow的弹性逻辑；而flex-basis只是“初始主轴尺寸”，后续仍可被flex-grow和flex-shrink调整。这也是响应式列宽可控的核心。
立即学习“前端免费学习笔记（深入）”；
- 设
flex-basis: 200px：小屏下若容器窄于200px，列会收缩（取决于flex-shrink）；大屏下有富余空间则按flex-grow扩展 - 设
flex-basis: 33.33%：适合三等分布局，但注意百分比基于父容器宽度计算，嵌套flex时容易嵌套误差 - 用
min-width配合flex-basis更稳妥，例如min-width: 280px; flex-basis: 33.33%，保证小屏下单列不窄于280px
IE11兼容flex多列布局要注意什么
IE11支持flex但存在多个硬伤：不识别flex: 1简写中的flex-basis: 0%、flex-wrap行为异常、flex-grow在flex-direction: column下失效。必须降级处理。
- 显式写全
flex三项：flex: 1 1 0px（用0px而非0%，IE对百分比解析不稳定） - 避免在IE中使用
flex-wrap: wrap做列数切换，改用display: block+ 浮动或inline-block降级 - 用
@supports (display: flex)包裹现代写法，IE11会跳过该规则块，走下面的备用样式
真正难的不是写几行flex，而是理解flex-basis和flex-grow的协作时机——它们只在空间有盈余或不足时才介入，内容本身宽度永远是第一优先级。