深入理解 flexbox 布局中 flex: 1 1 0 與未設置 flex-basis 的差異
在 Flexbox 布局中，flex: 1 1 0 和未設置 flex-basis 會產生截然不同的布局效果，這源于它們對 flex-basis 屬性的不同處理方式。 讓我們深入探討這種差異。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 的簡寫形式。flex: 1 1 0 分別將這三個屬性設置為 1、1 和 0。這意味著：
- flex-grow: 1: 元素將按比例分配剩余空間。
- flex-shrink: 1: 元素將按比例收縮以適應容器空間。
- flex-basis: 0: 元素的初始大小為 0。 這是關鍵所在。
而當未設置 flex-basis 時，其默認值為 auto。auto 的含義是元素的初始大小將根據其內容計算得出。
讓我們通過一個例子來說明：假設一個容器包含一個寬度為 200px 的圖片和一段文字，我們希望文字占據剩余空間。
場景一：flex: 1 1 0
如果文字元素的 flex 屬性設置為 1 1 0，由于 flex-basis: 0，文字元素的初始大小為 0。因此，它不會占用任何空間，所有剩余空間都將分配給文字元素。圖片將保持其 200px 的寬度。
場景二：未設置 flex-basis (默認 auto)
如果文字元素未設置 flex-basis，則 flex-basis 為 auto。此時，文字元素的初始大小將根據其內容計算。如果文字內容較多，其初始寬度可能超過剩余空間，導致圖片寬度被壓縮以適應容器。
代碼示例 (場景一):
<div class="container"> <div class="image"></div> <div class="text" style="flex: 1 1 0;"></div> </div>
代碼示例 (場景二):
<div class="container"> <div class="image"></div> <div class="text"></div> </div>
(css 代碼與原文相同，此處省略)
總結：flex-basis: 0 強制元素不占用任何初始空間，而 flex-basis: auto 則讓元素根據內容大小決定初始空間。選擇哪種方式取決于你希望元素在 Flexbox 布局中如何分配空間和響應容器大小的變化。 flex: 1 1 0 適用于希望元素完全填充剩余空間的場景，而未設置 flex-basis 則更適合需要根據內容自適應大小的場景。
