8 張 Gif 圖學會 Flexbox

Flexbox 實現了幫助我們脫離 CSS 苦海（例如垂直居中）的目標，但想精通它卻需要你應對一些挑戰(zhàn)。所以，我們將通過一些動畫讓你直觀地了解 Flexbox 的工作原理，并使用它來構建靈活的布局。

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

為了達成這一目標，它讓容器決定如何分配容器成員的大小以及空間。這聽起來相當不錯，那么，讓我們來看看實踐中它是如何工作的。

在本文中，我們將深入的探討 Flexbox 中 5 個常見的屬性?？纯此鼈兡茏鍪裁?，如何使用它們，以及使用它們構建的布局是什么樣的。

屬性 #1: Display: Flex

以下是示例頁面：

我們可以看到，在灰色的容器中，包含了 4 種不同顏色與大小的 div 元素。每個 div 元素都默認display: block，因此，每個四方體都占據了一行的整個寬度。

為了開始使用 Flexbox 布局，你需要將你的容器變?yōu)?Flex 容器。這很容易實現：

#container {
  display: flex;
}

你會發(fā)現，你的 div 元素已經內行顯示了。雖然，看似你只是稍微做了些改變，但是你已經為四方體添加了名為 flex context 的環(huán)境。于是，你就可以利用它來定位元素了，這比傳統(tǒng)的 CSS 寫法要簡單了很多。

屬性 #2: Flex Direction

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

項目默認是由主軸（從左到右）排列的，這就是你使用display: flex后，四方體以水平線排列的原因。

而Flex-direction決定了主軸的方向。

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

這里有一個重要的區(qū)別：flex-direction: column所指的是四方體將沿主軸的垂直方向對齊。它使主軸自身從水平到垂直。

而flex-direction還有一些其他的值供你設置，例如：row-reverse與column-reverse.

屬性 #3: Justify Content

justify-content屬性定義了項目在主軸上的對齊方式。

在這里，你將更多的了解主軸與交叉軸的區(qū)別。首先，讓我們回到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，讓我們看看會發(fā)生什么：

結論

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

感謝你的閱讀。

如果覺得文章不錯，不妨點個贊。

注：

1. 本文版權歸原作者所有，僅用于學習與交流。
2. 如需轉載譯文，煩請按下方注明出處信息，謝謝！

英文原文：How Flexbox works?—?explained with big, colorful, animated gifs
作者：Scott Domes
譯者：IT程序獅
譯文地址：http://m.itdecent.cn/p/cd69906d7703