用彩色動畫 GIF 大圖解釋彈性盒工作機制

　　彈性盒（Flexbox）承諾要將我們從普通 CSS 的罪惡（比如垂直對齊）之中解救出來。

　　不錯，彈性盒確實兌現了這一目標。不過，掌握它的新心智模型可能是個挑戰。

　　所以我們用動畫來看看彈性盒的工作機制，這樣就可以用它來建立更好的佈局。

　　彈性盒的基本原則是讓佈局變得靈活而直觀。

　　為實現這個原則，它讓容器自己決定如何均勻分配其子專案 - 包括子專案大小及它們之間的間距。

　　原則上，這聽起來都不錯。但是我們來看看它實際上看起來是什麼樣的。

　　本文將深入研究五種最常用的彈性盒屬性。我們將探索它們會做什麼，我們可以如何使用它們，以及它們的結果會實際是什麼樣子。

　　屬性 #1: display: flex

　　如下是我們的示例網頁：

　　有四個不同大小的彩色 div，被包在一個灰色容器 div 中。眼下，每個 div 預設被設定為 display: block。因此，每個正方形佔一整行寬度。

　　為了開始用彈性盒，你需要把容器變成一個彈性容器。這輕而易舉：

#container {
  display: flex;
}

　　變化不大 - 現在 div 在行內顯示，僅此而已。不過，在幕後，你已經做了些很牛的事情了。你給你的正方形加上了彈性上下文。

　　現在你可以開始在該上下文內定位它們，而且遠沒有傳統 CSS 那麼難。

　　屬性 #2: flex-direction

　　彈性容器有兩個軸：一個主軸（main axis）和一個側軸（cross axis），預設看起來是這樣的：

　　預設情況下，彈性專案是沿著主軸，從左到右排列。這就是為什麼一旦應用了 display: flex，正方形就預設排列到一個水平線上的原因。

　　不過，Flex-direction 可以讓你旋轉主軸。

#container {
  display: flex;
  flex-direction: column;
}

　　這裡作出了一個重要的區別：flex-direction: column 不會將正方形在側軸上對齊，而是在主軸上對齊。它讓主軸本身從水平變為垂直的。

　　flex-direction 還有兩個其它選項，即：row-reverse 和 column-reverse。

　　屬性 #3: justify-content

　　Justify-content 控制如何在主軸上對齊彈性專案。

　　這裡，你將進一步深入主軸/側軸的區別。首先，回到 flex-direction: row。

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

　　使用 justify-content 有五個命令可以由你處理：

1. Flex-start
2. Flex-end
3. Center
4. Space-between
5. Space-around

　　space-around 和 space-between 最不直觀。space-between 是讓每個正方形之間的空間相等，而不是讓正方形與容器之間的空間相等。

　　space-around 在正方形的每一邊上放一個相等的緩衝空間 - 這意味著最外的正方形和容器之間的空間是兩個正方形之間的空間的一半（每個正方形貢獻出一個不重疊的等量邊緣，所以空間加倍）。

　　最後一點：記住 justify-content 是沿著主軸起作用，flex-direction 轉換主軸。這將是很重要的，因為你要移到...

　　屬性 #4: align-items

　　如果理解了 justify-content，那麼 align-items 也就輕而易舉了。

　　justify-content 沿著主軸起作用，而 align-items 是應用於側軸。

　　現在我們把 flex-direction 重新設定為 row，這樣軸就跟上圖一樣了。

　　然後，我們深入 align-items 命令。

1. flex-start
2. flex-end
3. center
4. stretch
5. baseline

　　頭三個與 justify-content 一模一樣，所以這裡沒什麼特別的。

　　不過，後兩個有點不同。

　　如果設定為 stretch，彈性專案就會佔據全部側軸；如果設定為 baseline，就會沿著段落標記的底部對齊。

　　（注意，對於 align-items: stretch，必須將正方向的 height 設定為 auto，否則 height 屬性會覆蓋 stretch 屬性。）

　　對於 baseline，請注意，如果拿走段落標記，就會對齊到正方形的底部，像這樣：

　　為更好演示主軸和側軸，現在我們結合 justify-content 和 align-items，看看兩種不同的 flex-direction 命令下，居中有何不同：

　　即使在兩種情況下正方形都能垂直和水平居中，二者也不是一碼事！

　　屬性 #5: align-self

　　align-self 允許手動控制某個特殊元素的對齊。

　　它主要是為一個正方形覆蓋 align-items。所有屬性值與 align-items 都是相同的，不過其預設值是 auto，此時它跟容器的 align-items 值一致。

#container {
  align-items: flex-start;
}

.square#one {
  align-self: center;
}
// 只有這種正方形居中。

　　現在我們來看看結果是什麼樣子。會把 align-self 應用到兩個正方形上，而其它的則應用 align-items: center 和 flex-direction: row。

　　結論

　　即使我們只是觸及到了彈性盒的皮毛，這些命令也足以讓你可以處理大多數基礎的對齊 - 以及垂直對齊到核心內容。