圖文并茂！8 張 Gif 圖學會 Flexbox
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 個值供你使用：
- Flex-start
- Flex-end
- Center
- Space-between
- 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 屬性有哪些值：
- 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 屬性兩個不同值后，它的表現如何：
我們可以看到， 對于 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 教程，或者如果本教程對你有所幫助，你可以點擊喜歡或留下評論。
感謝你的閱讀。
如果覺得文章不錯，不妨點個贊。
注：
- 本文版權歸原作者所有，僅用于學習與交流。
- 如需轉載譯文，煩請按下方注明出處信息，謝謝！
來自：http://www.jianshu.com/p/cd69906d7703