Flex子项按比例分配需设flex-basis为0%（非auto），再配flex-grow，否则内容宽度干扰比例；width百分比在Flex中易因flex-shrink和重排失效，应全程用flex简写控制。
flex-grow 配合 flex-basis 实现固定比例分配
Flex 布局里子项按比例占宽，靠的不是 width 百分比，而是 flex-grow 和 flex-basis 的组合。很多人直接设 flex-grow: 1，结果发现等比失效——那是因为默认 flex-basis: auto，浏览器先按内容宽度算基准，再伸缩，比例就乱了。
正确做法是把 flex-basis 设为 0%（或 0px），强制从零开始按 flex-grow 分配剩余空间：
container {
display: flex;
}
.item-1 { flex: 2 0 0%; }
.item-2 { flex: 3 0 0%; }
.item-3 { flex: 5 0 0%; }上面三者就会稳定按 2:3:5 占满父容器宽度，不受自身内容影响。
-
flex: <grow> <shrink> <basis>是简写，0%比0px更安全，兼容性更好 - 如果子项有固定内边距或边框，建议用
box-sizing: border-box避免撑出容器 - IE10/11 对
flex: 2 0 0%支持不稳定，可降级为flex-grow: 2; flex-shrink: 0; flex-basis: 0%
百分比 width 在 Flex 容器里为什么经常失效
在 display: flex 的父容器中，给子项设 width: 33.33% 看似合理，但实际常被忽略两点：一是 flex 属性默认开启伸缩（flex-shrink: 1），二是子项内容可能溢出或换行，触发浏览器重排。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：width: 33.33% 的三个子项横排后总宽度超 100%，最后一项掉到下一行；或者缩小窗口时某一项被压缩得比其他项窄。
- Flex 子项的
width只在flex-basis为auto时作为基准参考，不保证最终尺寸 - 若坚持用
width，必须同时加flex: 0 0 auto关闭伸缩，否则 CSS 会优先服从flex规则 - 响应式场景下，
width+flex混用极易冲突，推荐全程用flex简写控制比例
响应式比例切换要避免媒体查询硬切 flex 值
想在移动端把 3 列变 2 列、再变 1 列，有人写一堆 @media 改 flex-grow，结果维护困难、比例错位。根本问题是没利用好 flex-wrap 和容器约束。
更轻量的做法：保持比例逻辑不变，只改排列方式和容器宽度约束：
.container {
display: flex;
flex-wrap: wrap;
}
.item { flex: 1 0 300px; } /* 最小宽度 300px，自动换行 */
@media (max-width: 768px) {
.item { flex-basis: 100%; } /* 满屏单列 */
}-
flex-basis设具体像素值（如300px）比百分比更可控，尤其配合flex-wrap - 不要在不同断点里反复改
flex-grow数值，容易导致比例叠加计算错误 - 用
min-width+flex-basis组合，比纯百分比更能适应内容长度变化
flex-shrink 导致比例塌缩的隐性原因
明明写了 flex: 2 0 0% 和 flex: 3 0 0%，但缩小窗口时比例还是变了——大概率是父容器或祖先元素设置了 min-width、overflow 或未设 width，导致 Flex 容器自身宽度不可控，子项被迫收缩。
Flex 比例生效的前提是：容器有明确的可用主轴空间。这个“明确”不是靠视觉估算，而是 CSS 盒模型能算出具体数值。
- 检查父容器是否遗漏
width、max-width或inline-size设置 - 避免在 Flex 容器上设
white-space: nowrap，它会阻止子项换行，间接挤压flex-basis - 用浏览器开发者工具看 computed 样式里的
flex-basis是否真为0%，有时继承或重置样式会悄悄覆盖
比例这件事，本质是空间分配权的归属问题。Flex 不负责“保证比例”，只负责“按规则分空间”。规则写得模糊，空间算得不准，比例自然守不住。
