Flexbox 實(shí)現(xiàn)了幫助我們脫離 CSS 苦海（例如垂直居中）的目標(biāo)秆吵，但想精通它卻需要你應(yīng)對(duì)一些挑戰(zhàn)。所以五慈，我們將通過(guò)一些動(dòng)畫(huà)讓你直觀地了解 Flexbox 的工作原理纳寂，并使用它來(lái)構(gòu)建靈活的布局。
Flexbox 的基本原則是提供一種構(gòu)建靈活泻拦、直觀的布局方式毙芜。
為了達(dá)成這一目標(biāo)，它讓容器決定如何分配容器成員的大小以及空間争拐。這聽(tīng)起來(lái)相當(dāng)不錯(cuò)腋粥，那么，讓我們來(lái)看看實(shí)踐中它是如何工作的架曹。
在本文中隘冲，我們將深入的探討 Flexbox 中 5 個(gè)常見(jiàn)的屬性“笮郏看看它們能做什么展辞，如何使用它們，以及使用它們構(gòu)建的布局是什么樣的万牺。
屬性 #1: Display: Flex
以下是示例頁(yè)面：
我們可以看到罗珍，在灰色的容器中，包含了 4 種不同顏色與大小的 div 元素脚粟。每個(gè) div 元素都默認(rèn)display: block覆旱，因此，每個(gè)四方體都占據(jù)了一行的整個(gè)寬度核无。
為了開(kāi)始使用 Flexbox 布局扣唱，你需要將你的容器變?yōu)?Flex 容器。這很容易實(shí)現(xiàn)：
#container {
display: flex;
}
你會(huì)發(fā)現(xiàn)团南，你的 div 元素已經(jīng)內(nèi)行顯示了噪沙。雖然，看似你只是稍微做了些改變已慢，但是你已經(jīng)為四方體添加了名為 flex context 的環(huán)境曲聂。于是，你就可以利用它來(lái)定位元素了佑惠，這比傳統(tǒng)的 CSS 寫(xiě)法要簡(jiǎn)單了很多朋腋。
屬性 #2: Flex Direction
Flexbox 容器有兩根軸：主軸和垂直的交叉軸齐疙，默認(rèn)情況如下：
項(xiàng)目默認(rèn)是由主軸（從左到右）排列的，這就是你使用display: flex后旭咽，四方體以水平線排列的原因贞奋。
而Flex-direction決定了主軸的方向。
#container {
display: flex;
flex-direction: column;
}
這里有一個(gè)重要的區(qū)別：flex-direction: column所指的是四方體將沿主軸的垂直方向?qū)R穷绵。它使主軸自身從水平到垂直轿塔。
而flex-direction還有一些其他的值供你設(shè)置，例如：row-reverse與column-reverse.
屬性 #3: Justify Content
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式仲墨。
在這里勾缭，你將更多的了解主軸與交叉軸的區(qū)別。首先目养，讓我們回到flex-direction: row值上俩由。
#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
justify-content屬性包含了 5 個(gè)值供你使用：
Flex-start
Flex-endCenterSpace-betweenSpace-around
Space-around與Space-between是兩個(gè)不容易直觀理解的值。Space-between實(shí)現(xiàn)了兩端對(duì)齊癌蚁，而四方體之間的間隔都是相等的幻梯。
Space-around使四方體兩側(cè)的間隔相等，這意味著四方體之間的間隔比最外邊四方體與邊框的間隔要大一倍努释。（每個(gè)四方體貢獻(xiàn)了不重疊的等量余量碘梢，從而使空間翻倍）
最后一點(diǎn)：請(qǐng)記住** justify-content沿主軸對(duì)齊，而flex-direction決定了主軸的方向伐蒂。**它將決定你移動(dòng)的方向煞躬。
屬性 #4: Align Items
當(dāng)你理解了justify-content屬性，理解Align Items屬性就變得輕而易舉了饿自。
justify-content定義了項(xiàng)目在主軸的對(duì)齊方式汰翠，而align-items屬性則定義了項(xiàng)目在交叉軸上是如何對(duì)齊的。
當(dāng)我們將flex-direction屬性值重置為row后昭雌，我們的軸看上去就與上圖一致。
那么健田，讓我們深入的了解下Align Items屬性有哪些值：
flex-start
flex-endcenterstretchbaseline
前三個(gè)值與justify-content屬性中的值完全一致烛卧，沒(méi)有太多需要解釋的地方。
但是妓局，接下來(lái)兩個(gè)值卻有些不同总放。
Stretch指的是如果項(xiàng)目未設(shè)置高度或設(shè)為auto，項(xiàng)目將占滿整個(gè)容器好爬。而baseline是指項(xiàng)目將與段落標(biāo)簽的底部對(duì)齊局雄。
（請(qǐng)注意，對(duì)于align-items：stretch存炮，我不得不將四方體的高度設(shè)置為auto炬搭，否則height屬性將覆蓋該stretch）
對(duì)于baseline蜈漓，如果你去掉段落標(biāo)簽，它則會(huì)對(duì)齊四方形的底部宫盔，如下圖所示：
為了更好地演示主軸和交叉軸的表現(xiàn)融虽，在基于justify-content屬性和align-items屬性的值為center的情況下，讓我們看看賦予flex-direction屬性?xún)蓚€(gè)不同值后灼芭，它的表現(xiàn)如何：
我們可以看到有额，對(duì)于row值，四方體沿著與主軸水平方向排列彼绷，而對(duì)于column值巍佑，它們則沿著與主軸垂直的方向排列。
即使出現(xiàn)了同時(shí)保持水平與垂直居中的情況寄悯，兩者也不可互換萤衰！
屬性 #5: Align Self
align-self屬性允許你對(duì)特定的項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，它可覆蓋align-items屬性热某。雖然它的默認(rèn)值為auto腻菇，但它繼承了父元素align-items的屬性。除了auto外昔馋，其他都與align-items屬性完全一致筹吐。
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
// Only this square will be centered.
我們將在兩個(gè)四方體上應(yīng)用align-self屬性，而其余的四方體則應(yīng)用align-items: center與 flex-direction: row秘遏，讓我們看看會(huì)發(fā)生什么：
結(jié)論
雖然丘薛，我們僅僅是了解 Flexbox 的一些淺層的使用方法，但這些方法足以讓你利用 Flexbox 應(yīng)對(duì)大多數(shù)水平與垂直對(duì)齊的問(wèn)題邦危。如果你想觀看更多的 GIF Flexbox 教程洋侨，或者如果本教程對(duì)你有所幫助，你可以點(diǎn)擊喜歡或留下評(píng)論倦蚪。
感謝你的閱讀希坚。
如果覺(jué)得文章不錯(cuò)，不妨點(diǎn)個(gè)贊陵且。
注：
- 本文版權(quán)歸原作者所有裁僧，僅用于學(xué)習(xí)與交流。
- 如需轉(zhuǎn)載譯文慕购，煩請(qǐng)按下方注明出處信息聊疲，謝謝！
英文原文：How Flexbox works?—?explained with big, colorful, animated gifs
作者：Scott Domes
譯者：IT程序獅
譯文地址：http://www.reibang.com/p/cd69906d7703
