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

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

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

屬性 1: display: Flex

以下是示例頁面：

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

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

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

屬性 2: Flex Direction

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

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

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

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

屬性 3: Justify Content

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

在這里，你將更多的了解主軸與交叉軸的區別。首先，讓我們回到flex-direction: row值上。

justify-content屬性包含了 5 個值供你使用：

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屬性有哪些值：

前三個值與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屬性完全一致。

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

結論

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

注：