圖文並茂！8 張 Gif 圖學會 Flexbox

Flexbox 實現了幫助咱們脫離 CSS 苦海（例如垂直居中）的目標，但想精通它卻須要你應對一些挑戰。因此，咱們將經過一些動畫讓你直觀地瞭解 Flexbox 的工做原理，並使用它來構建靈活的佈局。

Flexbox 的基本原則是提供一種構建靈活、直觀的佈局方式。

爲了達成這一目標，它讓容器決定如何分配容器成員的大小以及空間。這聽起來至關不錯，那麼，讓咱們來看看實踐中它是如何工做的。

在本文中，咱們將深刻的探討 Flexbox 中 5 個常見的屬性。看看它們能作什麼，如何使用它們，以及使用它們構建的佈局是什麼樣的。

屬性 #1: Display: Flex

如下是示例頁面：

咱們能夠看到，在灰色的容器中，包含了 4 種不一樣顏色與大小的 div 元素。每一個 div 元素都默認display: block，所以，每一個四方體都佔據了一行的整個寬度。

爲了開始使用 Flexbox 佈局，你須要將你的容器變爲 Flex 容器。這很容易實現：

#container {
  display: flex;
}

你會發現，你的 div 元素已經內行顯示了。雖然，看似你只是稍微作了些改變，可是你已經爲四方體添加了名爲 flex context 的環境。因而，你就能夠利用它來定位元素了，這比傳統的 CSS 寫法要簡單了不少。

屬性 #2: Flex Direction

Flexbox 容器有兩根軸：主軸和垂直的交叉軸，默認狀況以下：

項目默認是由主軸（從左到右）排列的，這就是你使用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屬性包含了 5 個值供你使用：

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指的是若是項目未設置高度或設爲auto，項目將佔滿整個容器。而baseline是指項目將與段落標籤的底部對齊。

（請注意，對於align-items：stretch，我不得不將四方體的高度設置爲auto，不然height屬性將覆蓋該stretch）

對於baseline，若是你去掉段落標籤，它則會對齊四方形的底部，以下圖所示：

爲了更好地演示主軸和交叉軸的表現，在基於justify-content屬性和align-items屬性的值爲center的狀況下，讓咱們看看賦予flex-direction屬性兩個不一樣值後，它的表現如何：

咱們能夠看到，對於row值，四方體沿着與主軸水平方向排列，而對於column值，它們則沿着與主軸垂直的方向排列。

即便出現了同時保持水平與垂直居中的狀況，二者也不可互換！

屬性 #5: Align Self

align-self屬性容許你對特定的項目有與其餘項目不同的對齊方式，它可覆蓋align-items屬性。雖然它的默認值爲auto，但它繼承了父元素align-items的屬性。除了auto外，其餘都與align-items屬性徹底一致。

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.

咱們將在兩個四方體上應用align-self屬性，而其他的四方體則應用align-items: center與 flex-direction: row，讓咱們看看會發生什麼：

結論

雖然，咱們僅僅是瞭解 Flexbox 的一些淺層的使用方法，但這些方法足以讓你利用 Flexbox 應對大多數水平與垂直對齊的問題。若是你想觀看更多的 GIF Flexbox 教程，或者若是本教程對你有所幫助，你能夠點擊喜歡或留下評論。

感謝你的閱讀。

若是以爲文章不錯，不妨點個贊。

注：

1. 本文版權歸原做者全部，僅用於學習與交流。
2. 如需轉載譯文，煩請按下方註明出處信息，謝謝！

英文原文：How Flexbox works — explained with big, colorful, animated gifs
做者：Scott Domes
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/25152672