Flexbox布局中，flex属性是flex-grow、flex-shrink、flex-basis三个子属性的简写形式，不同的简写值会直接影响子元素在容器中的空间分配表现，其中flex: 1 1 auto和flex: 1是两种常见的写法，很多开发者容易混淆两者的差异。
flex属性的三个子属性基础
要理解两种写法的差异，首先需要明确flex三个子属性的作用：
- flex-grow：定义子元素的放大比例，默认值为0，即如果存在剩余空间，也不会放大。
- flex-shrink：定义子元素的缩小比例，默认值为1，即如果空间不足，子元素会缩小。
- flex-basis：定义子元素在分配多余空间之前，占据的主轴空间大小，默认值为auto，即元素本身的尺寸。
两种写法的属性值对应
两种简写写法对应的完整属性值如下：
| 简写写法 | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| flex: 1 1 auto | 1 | 1 | auto |
| flex: 1 | 1 | 1 | 0% |
可以看到两者的flex-grow和flex-shrink值完全一致，唯一的核心差异在于flex-basis的取值，这也是两者空间分配表现不同的根本原因。
空间分配逻辑差异解析
剩余空间分配阶段
当Flex容器存在剩余空间时，会按照flex-grow的比例分配剩余空间，此时两者的计算基准不同：
- flex: 1 1 auto的基准是元素自身的原始尺寸，最终尺寸 = 自身原始尺寸 + 剩余空间 * (1 / 所有子元素flex-grow之和)
- flex: 1的基准是0%，相当于先忽略元素自身原始尺寸，最终尺寸 = 0 + 剩余空间 * (1 / 所有子元素flex-grow之和)
举个实际例子，容器宽度为600px，内部有两个子元素，第一个元素原始宽度为200px，第二个为100px，都设置flex-grow为1，容器剩余空间为300px：
- 两个元素都设置flex: 1 1 auto时，第一个最终尺寸为200 + 150 = 350px，第二个为100 + 150 = 250px
- 两个元素都设置flex: 1时，第一个最终尺寸为0 + 150 = 150px，第二个为0 + 150 = 150px
空间不足收缩阶段
当Flex容器空间不足时，会按照flex-shrink的比例收缩子元素，此时两者的收缩基准也不同：
- flex: 1 1 auto的收缩基准是元素自身的原始尺寸，收缩量 = (超出空间 * 自身原始尺寸 * flex-shrink) / 所有子元素(原始尺寸 * flex-shrink)之和
- flex: 1的收缩基准是0%，但收缩计算时实际还是基于元素分配后的尺寸，不过因为初始基准为0，最终收缩后的尺寸会更接近均分的结果
代码示例对比
以下是两种写法的实际对比代码：
/* 容器样式 */
.flex-container {
display: flex;
width: 600px;
height: 100px;
border: 1px solid #ccc;
}
/* 子元素基础样式 */
.flex-item {
height: 80px;
border: 1px solid #f00;
}
/* 第一个子元素原始宽度200px */
.item1 {
width: 200px;
}
/* 第二个子元素原始宽度100px */
.item2 {
width: 100px;
}
/* flex: 1 1 auto写法 */
.flex-auto .item1,
.flex-auto .item2 {
flex: 1 1 auto;
}
/* flex: 1写法 */
.flex-1 .item1,
.flex-1 .item2 {
flex: 1;
}<!-- flex: 1 1 auto效果 -->
<div class="flex-container flex-auto">
<div class="flex-item item1">item1</div>
<div class="flex-item item2">item2</div>
</div>
<!-- flex: 1效果 -->
<div class="flex-container flex-1">
<div class="flex-item item1">item1</div>
<div class="flex-item item2">item2</div>
</div>使用场景建议
根据实际需求选择合适的写法：
- 如果需要子元素保留自身原始尺寸的基础上分配剩余空间，选择flex: 1 1 auto
- 如果需要子元素完全均分容器空间，忽略自身原始尺寸，选择flex: 1
- 如果子元素内容宽度差异较大，希望优先按内容分配空间，也可以考虑flex: 1 1 auto，避免内容被过度挤压