更多關于 Flexbox 布局如何工作的–用大彩圖和 GIF 動畫解釋

上一篇文章我們入門了幾個基本的 Flexbox 屬性： flex-direction ， justify-content ， align-items 和 align-self 。

這些屬性對于創建基本布局非常有用。 但是一旦你開始使用Flexbox構建網頁的時候，你需要更深入學習Flexbox 屬性，以發揮它的潛力。

現在讓我們深入了解 Flexbox 的縮放 – 以及如何利用它來構建漂亮的自適應布局。

屬性 #1: Flex-Basis

在上一篇文章中，我們主要了解了適用于容器元素的屬性。這一次，我們專門介紹如何控制子元素(flex項)的大小。

我想，我們這次介紹的第一個屬性是 Flexbox 教程中最不好解釋的屬性之一。

但 – 不要擔心。 它實際上很簡單。

flex-basis 控制一個子元素(flex項)的默認大小，但是它可以被其他的 Flexbox 屬性影響（稍后詳細介紹）。

在下面的 GIF 中，你會發現它可以與 width 屬性互換（等價）：

然而，flex-basis 和 width 有什么不同呢？ flex-basis 對應于 flex 軸線而言的：

flex-basis 影響元素在主軸(main axis)上的大小。

讓我們看看當保持 flex-basis 不變的情況下，改變主軸方向，會發生什么。

注意，我們必須從手動將 height 切換到設置 width 屬性。 因此， flex-basis 是根據 flex-direction 的不同來確定 width 或 height 的。

屬性 #2: Flex Grow（拉伸）

現在我們要更復雜一點了。

首先，讓我們將所有的矩形子元素(flex項)設置為相同的 width ，120px：

現在，涉及到名為 flex-grow 的屬性，其默認值為 0 。這意味著矩形子元素(flex項)不允許自動占據容器中剩余的空間。

這意味著什么呢？好吧，讓我們嘗試把為每個矩形子元素(flex項)的 flex-grow 設置為 1 ：

所有矩形子元素(flex項)共同占據了整個容器的寬度，它們之間的間隔也都是均勻分布。 flex-grow 值覆蓋了 width 值。

然而，關于 flex-grow 令人困惑的是其值實際上意味著什么呢？ flex-grow: 1 是什么意思呢？

嗯，如果設置每個矩形子元素(flex項)的 flex-grow 屬性值為 999 ，讓我們來看一下效果：

正如你所看到的，完全一樣。

這是因為 flex-grow 不是絕對值 – 它是一個相對值。

對于每個矩形子元素(flex項) 來說，重要的不是其 flex-grow 值有多大，而是這個值與其他矩形子元素(flex項) 的 flex-grow 值相比較，相對值有多大。

如果我們將每個矩形子元素(flex項) 設置為 flex-grow: 1 ，然后調整第 3 個矩形子元素的 flex-grow 值，那么我們可以看到改變，如圖：

要真正理解這里到底發生了什么，讓我們快速過一邊簡單的數學知識。

每個矩形子元素(flex項)的 flex-grow 初始值都是 1 。如果我們將每個矩形子元素(flex項)的 flex-grow 相加起來，總和為 6 。因此容器的總寬度被平均分成了 6 份。每個矩形子元素(flex項)增長到填充容器可用空間的1/6。

當我們將第 3 個矩形子元素的 flex-grow 設置為 2 時，容器現在被分成了 7 等份，因為所有 flex-grow 屬性是：1 + 1 + 2 + 1 + 1 + 1。

第 3 個矩形子元素占了整個容器空間的 2/7，其他的占了 1/7。

同理，當設置第 3 個矩形子元素的 flex-grow: 3 的時候，整個容器寬度被分成了 8 等份（1 + 1 + 3 + 1 + 1 + 1），第 3 個矩形子元素占了 3/8，其他的占了 1/8。

以此類推。

flex-grow 只和比例相關，如果我們設置第 3 個矩形子元素 flex-grow: 12 ，其余每個方塊的 flex-grow: 4 ；跟第三個設置成 3，其他的設置成 1 得到同樣的效果，見下圖：

重要的是每個矩形子元素的 flex-grow 與其他矩形子元素成比例的。

最后一點，請記住，就像 flex-basis 一樣， flex-grow 只適用于主軸(main axis)。我們的矩形子元素只會影響寬度，除非我們將 flex-direction 設置為 column 。

屬性 #3: Flex Shrink（收縮）

flex-shrink 正好和 flex-grow 相反，它是決定矩形子元素允許收縮多少的。

它的主要用途是指定哪些 flex項 要縮小，哪些 flex項 不要縮小。默認情況下，每個矩形子元素(flex項)都為 1 – 這意味著每個矩形子元素將隨著容器收縮而收縮。

讓我們看看實際情況。 在下面的 GIF 中，每個矩形子元素(flex項)的 flex-grow 為 1 ，所以他們填充滿了整個容器，并且 flex-shrink 為 1 ，所以他們被允許收縮。

現在讓我們將第 3 個矩形子元素的 flex-shrink 設置為 0 。它是禁止收縮，所以它會隨著容器拉伸而拉伸，但是當容器收縮的時候，當其寬度收縮至設置的120px時，它不再允許收縮。

flex-shrink 的默認值是 1 – 這意味著你的元素默認允許收縮，除非你告訴他們不允許收縮！

同樣， flex-shrink 約為比例。如果一個矩形子元素的 flex-shrink 為 6 ，并且其余 flex-shrink 為 2 ，那么這個矩形子元素隨著容器空間的收縮，將以 3 倍于其他矩形子元素的速度縮小。

注意這里的措辭：3x（3倍） flex-shrink 的矩形子元素將縮小 3倍。這并不是收縮1/3的寬度。

稍后，我們將深入了解元素是如何收縮和拉伸的。但首先，讓我們了解最后一個屬性，把這些東西都串起來。

屬性 #4: Flex

flex 是 flex-grow ， flex-shrink 和 flex-basis 的縮寫 – 所有這些都放在一起。

它的默認值是 0 （grow）， 1 （shrink）和 auto （basis）。

我們把上一個例子簡化成只有兩個矩形子元素(flex項)。

下面是它們的屬性：

.square#one {
  flex: 2 1 300px;
}
.square#two {
  flex: 1 2 300px;
}

兩個矩形子元素(flex項)具有著相同的 flex-basis 。這意味著如果它們有足夠的空間（容器的空間是 600px 加上 margin 和 padding ），它們的寬度都是 300px 。

但隨著容器的拉伸，第 1 個矩形子元素(flex項)（具有更高的 flex-grow ）將以兩倍于第 2 個矩形子元素的速度增長。 隨著容器的收縮，第 2 個矩形子元素（具有更高的柔性收縮）將會以兩倍于第 1 個矩形子元素的的速度收縮。

實際效果如下圖：

flex項如何收縮和拉伸

這里有什么可能會混淆：當第 1 個矩形子元素拉伸時，并沒有拉伸到第 2 個矩形子元素的兩倍大小。同樣，當第 2 個矩形子元素縮小時，它不縮小到第 1 個矩形子元素的一半大小 – 即使 flex-shrink (理解為收縮比率)為 2 比 1 。

這兩個屬性并不是說它們的大小比例是 2:1 或者 1:2 ，而是說它們的收縮或拉伸速度的比率。

簡單的數學計算

容器的初始大小為 640px 。在容器的每一邊占用 20px 的 padding ，剩下的空間足夠讓兩個矩形子元素滿足 flex-basis 等于 300px。

當容器設置為 430px 時，空間收縮了 210px 。(愚人碼頭注：兩個矩形子元素的 flex-shrink 加起來為 3 ，那么， ) 第 1 個矩形子元素的 flex-shrink 為 1 , 也就是收縮了 70px 。 第 2 個矩形子元素的 flex-shrink 為 1 也就是收縮了 140px 。

當容器收縮到 340px 時，空間收縮了 300px。第 1 個矩形子元素的收縮了100px，第 2 個矩形子元素的收縮了 200px 。

容器收縮的空間根據它們各自的 flex-shrink 收縮率（2:1）的比率來分割。

這對于 flex-grow 也是同樣的。 當容器拉伸到 940px 時，也就是說空間拉伸 300px ，第 1 個矩形子元素被拉伸 200px ，，第 2 個矩形子元素被拉伸 100px 。

當涉及到 flex 屬性時，其實它們說的都是比例。

在上面的GIF中，您可以看到寬度是如何根據比率進行調整的，增量（Δ）顯示與 flex-basis 相比的差異。

結論

作為最后的總結： flex-basis 是控制元素在發生縮放之前，沿著主軸方向的大小。 flex-grow 指的是在元素拉伸時，和兄弟元素之間相比的拉伸比例。而 flex-shrink 指的是在元素收縮時，和兄弟元素之間相比的收縮比例。

我們還有更多的 Flexbox 屬性要介紹 – 在接下來的幾周里請密切關注。

 

來自：http://www.css88.com/archives/7236