深入理解flex属性：flex: 1 1 0 与 flex-basis 的差异
Flexbox布局中，flex属性至关重要，它简化了Flex项目的伸缩性和初始尺寸的定义。然而，flex: 1 1 0与未设置flex-basis的区别，以及它与flex: 1 1 auto的差异，常常让开发者感到困惑。
flex属性实际上是flex-grow、flex-shrink和flex-basis三个属性的简写形式。flex: 1 1 0分别对应：flex-grow: 1，flex-shrink: 1，flex-basis: 0。
flex-basis属性决定了Flex项目在主轴方向上的初始大小。当flex-basis设置为0时，是否等同于未设置它呢？让我们通过示例分析。
假设一个Flex容器包含一个图片和一段文本。我们将.text的flex属性设置为1 1 0，观察对图片宽度的影响。
<div class="container"> <div class="image"></div> <div class="text"> <p>这是一段较长的文本，用于测试flex-basis: 0的效果。</p> </div> </div> <style> .container { display: flex; } .image { width: 200px; height: 200px; background-color: #f0f0f0; margin-right: 20px; } .text { flex: 1 1 0; } </style>
这里，.text的flex-basis显式设置为0，这意味着其在主轴方向上的初始大小为0。但由于flex-grow为1，它会尽可能扩展以填充剩余空间。图片宽度保持200像素，因为它未设置flex-grow，不会扩展或收缩。
现在，将.text的flex属性改为1 1 auto：
.text { flex: 1 1 auto; }
flex-basis变为auto，初始大小由内容决定。由于文本较长，.text的初始大小会大于图片宽度，可能导致图片被压缩以适应容器总宽度。
原因在于flex-basis的值和Flexbox的布局算法。flex-basis: 0时，.text初始大小为0，允许它最大化扩展。而flex-basis: auto时，初始大小基于内容，可能导致其他项目被压缩。
因此，flex: 1 1 0和未设置flex-basis并不相同。flex-basis: 0明确定义了初始大小为0；未设置时，默认为auto，初始大小由内容决定。选择合适的flex-basis值对布局至关重要。
