CSS > Flex 佈局中的放大和收縮計算

殘陽映楓紅發表於2015-12-01
CSSFlex

原文：https://dev.opera.com/articles/flexbox-basics/

譯者注：本文僅簡單翻譯下原文中關於如何計算 flex 屬性的值的部分。其他有關 Flex 佈局的知識本文不作探討。

2015.12.5更新：關於 flex 不同的取值情況，以及 flex-basis 的取值意義，請參考我在這個問題中的回答：http://segmentfault.com/q/1010000004080910/a-1020000004100314

讓你的元素伸縮

伸縮盒最強大的特性或許就在於能使得伸縮流方向中的子元素的長度（如果 flex-flow 為 row ，長度指 width，如果 flex-flow 為 column 則指 height）成為可伸縮量，該長度隨伸縮流中父元素的可用空間量而變化。該特性通過使用 flex 屬性實現，此屬性的值由三部分構成。讓我們們一個個地來新增這些部分同時觀察其影響。首先，一個“伸縮放大係數 flex grow factor ”：

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}

這些無單位值用作比例——它們規定每個子元素應當佔據父元素中的多少可用空間。如果都設定為 1，則在伸縮盒中的每個子元素將設為相等尺寸。如果給其中一個子元素賦值為 2，則該子元素將佔據其他子元素的兩倍空間，如下所示：

#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}

你也可以為每個子元素設定一個伸縮基準值 flex basis，比如這樣：

#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}

首先，根據伸縮流方向將伸縮基準值應用為每個子元素的寬度或高度。接著，根據伸縮放大係數，將父元素內剩餘空間分配給子元素，得到子元素的最終寬度。據此當總共 750px 時，子元素主軸方向上尺寸為 200px，300px 和 250px。如果父容器主軸方向為 950px，那麼將多出 200px 來分配給子元素。第一個和第三個子元素分別分配到 50px，因為其伸縮放大係數為 1，它們最終尺寸各為 250px 和 300px。第二個子元素將分配到 100px，因為其伸縮放大係數為 2。其最終尺寸為 400px。

flex 的第三部分值很少用到，但以防萬一我們們還是看看。你也可以賦予你的子元素一個“伸縮收縮係數 flex shrink factor”，如下：

#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}

伸縮收縮係數，儘管稱謂如此，但還是正值——即上述宣告中的第二個無單位值。它們只有當子元素在主軸上溢位父容器的時候才會生效。它們也是作為比例值，但它們規定的是“溢位量”（子元素溢位父盒在之外的量）的比例，溢位量將從每個子元素的尺寸裡面扣除，從而使得子元素總尺寸減少到和父元素的尺寸相等——實際上就是要阻止溢位。

我們來考慮主軸上 1100px 的父容器。這將造成我們上面的子元素溢位父容器 300px（子元素在主軸上總共是 1400px）。由於子元素上設定了伸縮收縮係數：

  • 第一個子元素將移除溢位量的 1/6，即 50px。其計算值因此變為 350px。

  • 第二個子元素將移除溢位量的 3/6，即 150px。其計算值因此變為 450px。

  • 第三個子元素將移除溢位量的 2/6，即 100px。其計算值因此變為 300px。

因此伸縮收縮係數越高元素反而越小。

相關文章