深入理解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值對布局至關重要。
