深入理解 flex 布局中 flex: 1 1 0 與未設置 flex-basis 的區別
Flex 布局的 flex 屬性是一個簡寫屬性，包含 flex-grow、flex-shrink 和 flex-basis 三個子屬性。本文將詳細分析設置 flex: 1 1 0 與未設置 flex-basis (即使用默認值) 的差異，并解釋為何 flex-basis: 0 和 flex-basis: auto 會產生不同的布局結果。
問題概述
在實際應用中，經常會遇到這樣的情況：使用 flex: 1 1 0 時，元素寬度保持不變；而使用 flex: 1 1 auto 時，元素寬度會被調整。這種差異的原因是什么呢？
關鍵知識點
理解 flex-basis 至關重要：
- flex-basis 類似于 width（flex-direction: row）或 height（flex-direction: column），定義元素的初始大小。
- 當 flex-basis 和 width 或 height 同時存在時，width 或 height 將被忽略。
- Flex 屬性的默認值：
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
場景分析
場景一：元素使用默認值，其他元素 flex-grow: 1
如果一個元素使用默認的 flex-basis: auto，其初始大小將是其內容的自然大小（例如，圖片的實際寬度）。如果其他元素設置了 flex-grow: 1，且所有元素的總寬度超過容器寬度，則所有元素都會根據 flex-shrink 比例進行收縮。
場景二：元素使用默認值，其他元素 flex-basis: 0 和 flex-grow: 1
在這種情況下，使用默認 flex-basis: auto 的元素的初始大小仍然是其內容的自然大小。而 flex-basis: 0 的元素初始大小為 0。如果所有元素總寬度小于容器寬度，則 flex-grow: 1 的元素會按比例分配剩余空間。
結論
flex: 1 1 0 和未設置 flex-basis (即 flex-basis: auto) 的關鍵區別在于元素的初始大小。flex-basis: 0 將元素的初始大小設置為 0，使其完全由 flex-grow 和 flex-shrink 控制。而 flex-basis: auto 使用元素內容的自然大小作為初始大小，這會影響最終的布局結果。 因此，根據實際需求選擇合適的 flex-basis 值至關重要，才能靈活掌控 Flex 布局。 理解這些差異，有助于在實際項目中更有效地運用 Flex 布局。
