Flex布局中`flex: 1; width: 0;`組合的妙用：為什么第二個子元素設置`width: 0;`后，第一個子元素就能正常顯示？

flex布局技巧：巧用flex: 1; width: 0;解決子元素擠壓問題

flex布局在網頁布局中應用廣泛，但有時會遇到子元素相互擠壓的問題。本文將深入探討flex: 1; width: 0;組合的妙用，以及如何避免Flex容器中子元素被擠壓的情況。

以下代碼片段展示了一個常見問題：一個Flex容器包含兩個子元素，第一個子元素設置了固定寬度，第二個子元素占據剩余空間，導致第一個子元素幾乎不可見。

<div style="width: 350px; display: flex;">     <div style="width: 50px; height: 50px; background-color: blanchedalmond;"></div>     <div style="flex: 1; width: 0; white-space: nowrap;">         <div>css3 flex布局，文字超出.css3 flex布局，文字超出.css3 flex布局，文字超出.</div>     </div> </div>

為什么為第二個子元素添加width: 0;后，第一個子元素就能正常顯示？關鍵在于Flex布局的空間分配機制。

當display: flex時，子元素成為Flex項目。Flex布局會根據項目屬性分配空間。默認情況下，項目min-width和min-height為auto。如果僅為一個項目設置width，而其他項目寬度未指定，則設置了width的項目可能會被壓縮。這就是上述代碼中第一個元素被擠壓的原因。

然而，當第二個項目設置width: 0;并同時設置flex: 1;后，情況改變了。Flex布局計算所有項目的寬度。width: auto的含義取決于元素類型：塊級元素表示充分利用可用空間，內聯元素表示收縮至合適大小。

width: 0;和flex: 1;的組合，讓第二個項目不占用任何空間，flex: 1則分配剩余空間(350px – 50px = 300px)給它。這樣，第一個元素就不會被擠壓了。

雖然min-width或width: 0;都能解決問題，但更推薦使用flex-shrink: 0;阻止第一個元素被壓縮，這更符合Flex布局的設計理念。