在css初级项目里，使用flex布局经常遇到子项宽度不均匀的问题。通常这并不是flex本身有bug，而是我们没有用对flex-grow和flex-basis来控制每个子项的占比。只要搞清楚这两个属性的分工，就能轻松让子项按预期比例排布。
为什么子项宽度会不均匀
当容器设为display:flex后，子项默认按照内容多少来占地方。如果没有明确初始基准，浏览器就以子项内容宽度为flex-basis，再结合flex-grow分配剩余空间，结果就是看起来长短不一。
flex-basis与flex-grow分别做什么
flex-basis
flex-basis用来设置子项在分配多余空间之前的初始主轴尺寸。可以写固定值如200px，也可以写百分比。它优先级高于width。
flex-grow
flex-grow是一个非负数字，表示当容器有剩余空间时，子项按此权重去放大。默认是0，即不放大。
通过组合控制占比的示例
下面例子中，三个子项希望按1比2比1分布宽度，我们先把basis设为0，再给grow分配权重：
<div class="box"> <div class="item a">侧边</div> <div class="item b">主体</div> <div class="item c">侧边</div> </div>
.box {
display: flex;
}
.item {
flex-basis: 0;
}
.a, .c {
flex-grow: 1;
}
.b {
flex-grow: 2;
}
这样容器多余空间会按1:2:1分给三个子项，无论内容多少，比例都稳定。
常见错误写法
- 只写flex:1，但子项内有很长的文本，造成basis其实是内容宽，比例偏移
- 同时写width和flex-basis，导致自己都搞不清以哪个为准
- 忘记容器要有剩余空间，flex-grow在空间不足时不会生效
快速自查表
| 需求 | 写法 |
|---|---|
| 等比均分 | flex:1 1 0 |
| 固定基准再放大 | flex:1 1 200px |
| 不放大只缩 | flex:0 1 auto |
小结
在css初级项目中遇到flex子项宽度不均匀，先检查是否设置了合理的flex-basis，再用flex-grow分配权重。掌握这对组合，页面布局占比就完全可控了。
cssflex-growflex_basis修改时间：2026-07-27 05:09:17