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

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

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

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

Display: Flex

以下是示例頁面：

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

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

#container {
 display: flex;
}

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

Flex Direction

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

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

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

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

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

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-around 使四方體兩側的間隔相等，這意味著四方體之間的間隔比最外邊四方體與邊框的間隔要大一倍。（每個四方體貢獻了不重疊的等量餘量，從而使空間翻倍）

最後一點：請記住 justify-content 沿主軸對齊，而 flex-direction 決定了主軸的方向。它將決定你移動的方向。

Align Items

當你理解了 justify-content 屬性，理解 Align Items 屬性就變得輕而易舉了。

justify-content 定義了項目在主軸的對齊方式，而 align-items 屬性則定義了項目在交叉軸上是如何對齊的。

當我們將 flex-direction 屬性值重置為 row 後，我們的軸看上去就與上圖一致。

那麼，讓我們深入的瞭解下 Align Items 屬性有哪些值：

flex-start

flex-end

center

stretch

baseline

前三個值與 justify-content 屬性中的值完全一致，沒有太多需要解釋的地方。

但是，接下來兩個值卻有些不同。

Stretch 指的是如果項目未設置高度或設為 auto，項目將佔滿整個容器。而 baseline 是指項目將與段落標籤的底部對齊。

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

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

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

我們可以看到，

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

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 應對大多數水平與垂直對齊的問題。

閱讀更多 JS加加網 的文章

關鍵字: 苦海 動畫 圖文並茂