为何设置flex-basis:200px的弹性子项会被收缩？

问题描述 #

我搭建了一个包含两个子div的flex容器：第一个子项设置flex-basis:200px，第二个设置flex-basis:100%。当调整容器尺寸时，第一个div的宽度出现了收缩。代码如下：

HTML代码 #

<div class="flex-container">
    <div class="flex-item-1">div1</div>
    <div class="flex-item-2">div2</div>
</div>

CSS代码 #

.flex-container {
    display: flex;
}
.flex-item-1 {
    background: red;
    flex-basis: 200px;
}
.flex-item-2 {
    background: green;
    flex-basis: 100%;
}

我的疑问：

1. 既然第二个子项使用百分比值，为何第一个子项的宽度会被改变？我认为浏览器应该优先收缩第二个子项。
2. 当所有弹性子项均为固定宽度或百分比宽度，且固定宽度总和小于弹性容器宽度时，会发生什么？

解答 #

1. 为什么第一个子项会被收缩？ #

flex布局的收缩逻辑不看flex-basis的单位（固定值/百分比），而是由flex-shrink与flex-basis的乘积决定收缩权重——默认所有子项的flex-shrink都是1，浏览器会按每个子项的flex-shrink × flex-basis占总权重的比例分配收缩空间。

举个实例：假设容器当前宽度为500px，第二个子项的flex-basis:100%等同于500px，两个子项总需求宽度为200px+500px=700px，超出容器200px，需要收缩的总空间就是200px。

此时两个子项的收缩权重分别是：

• 子项1：1 × 200px = 200
• 子项2：1 × 500px = 500
  总权重为700。

子项1会收缩的空间是 200px × (200/700) ≈ 57px，最终宽度约143px；子项2收缩约143px，最终宽度约357px。

如果想让第一个子项不收缩、优先收缩第二个，只需给子项1设置flex-shrink:0，它就不会参与收缩，所有收缩空间由子项2承担。

2. 子项总宽度小于容器宽度时的表现 #

当所有子项的flex-basis总和小于容器宽度时，因为默认flex-grow为0，子项会保持各自的flex-basis宽度，容器剩余空间留白。

若想让子项填充剩余空间，可设置flex-grow属性：

• 所有子项flex-grow设为1，剩余空间会被均分；
• 子项flex-grow值不同时，剩余空间按比例分配（比如子项1设为2、子项2设为1，子项1会分到剩余空间的2/3）。

内容的提问来源于Stack Exchange，提问作者Tim