在Flexbox布局中，flex属性是一个十分重要的简写属性，它集成了flex-grow、flex-shrink和flex-basis三个属性，能够方便地控制Flex项目的伸缩性和初始尺寸。然而，对于flex: 1 1 0、flex: 1 1 auto以及未设置flex-basis的情况之间的差异，很多开发者仍会感到困惑。
flex属性解析
flex属性的完整语法为：flex: <flex-grow> <flex-shrink> <flex-basis>。
其中：
flex-grow：定义项目的放大比例
flex-shrink：定义项目的缩小比例
flex-basis：定义项目在主轴上的初始大小
例如，flex: 1 1 0分别对应：
flex-grow: 1
flex-shrink: 1
flex-basis: 0
关键差异：flex-basis: 0 与 auto
flex-basis属性决定了Flex项目在主轴上的初始大小。当设置为0时，初始尺寸为0;设置为auto时，初始大小由项目内容(或设定的width/height)决定。
那么，flex: 1 1 0是否等同于未设置flex-basis呢?答案是否定的。未设置时，flex-basis默认为auto，这意味着初始大小会基于内容计算，与显式设为0有明显区别。
示例对比
下面通过一个实际示例来观察二者的不同表现。假设有一个Flex容器，包含一张图片和一段文本：
示例1：使用 flex: 1 1 0
HTML：
<div class="container"> <div class="image"></div> <div class="text"> <p>这是一段较长的文本，用于测试flex-basis: 0的效果。</p> </div> </div>
CSS：
.container {
display: flex;
}
.image {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin-right: 20px;
}
.text {
flex: 1 1 0;
}效果说明：
.text 的 flex-basis 为 0，初始宽度为 0。但由于 flex-grow 为 1，它会尽可能扩展以填充剩余空间。图片保持 200px 宽度，不受压缩。
示例2：使用 flex: 1 1 auto
.text {
flex: 1 1 auto;
}效果说明：
flex-basis 为 auto，.text 的初始大小由文本内容决定。如果文本较长，.text 的初始宽度可能超过图片宽度，此时在容器总宽度不足时，图片可能被压缩(因为 flex-shrink 为 1)。
原理解析
这种现象源于Flexbox的布局算法：
当 flex-basis 为 0 时，项目初始尺寸为 0，空间分配完全依赖 flex-grow 比例。
当 flex-basis 为 auto 时，项目先按内容尺寸布局，再根据剩余空间和 flex-grow/flex-shrink 调整。
总结
flex: 1 1 0≠ 未设置 flex-basis。未设置时默认为 auto，由内容决定初始大小。
flex: 1 1 0与 flex: 1 1 auto的主要区别在于初始尺寸的计算方式，这会直接影响项目在容器内的空间分配。
在需要项目按比例均匀分配空间时，常用 flex: 1 1 0(或简写为 flex: 1);在希望项目先按内容尺寸布局再伸缩时，则适合使用 flex: 1 1 auto。
理解这些差异，能够帮助我们在实际开发中更精确地控制Flex布局，实现预期的视觉效果。