馬蹄疾 | 聊聊你可能並沒有完全掌握的 Flex 佈局

很多談 Flex 佈局的文章都是一個一個屬性的幹聊，有點像約會時的查戶口，枯燥而無趣。

如果讓你硬記中國 34 個省級行政單位，你不僅會記的很吃力，可能還沒法分清省和省之間的相鄰關係。而一旦你心中有了一副中國地圖，這些知識就變成信手拈來的東西了。

這篇文章立志做 Flex 佈局的中國地圖。

本文是『horseshoe·Flex專題』系列文章之一，後續會有更多專題推出

GitHub地址(持續更新)：horseshoe

部落格地址(文章排版真的很漂亮)：veedrin.com

如果覺得對你有幫助，歡迎來 GitHub 點 Star 或者來我的部落格親口告訴我

Flexbox叫彈性盒模型，它的使用場景主要是螢幕自適應佈局和取代浮動佈局。

細節性的知識需要大量實踐，系統性的知識則需要真正理解系統。我認為Flexbox就屬於系統性的知識。所以這篇文章從概念入手，力求做到只要閱讀一遍，就可以讓開發者心中有乾坤。

一維佈局模型

你他媽可能是三體看多了吧，啥叫一維佈局模型？

一維佈局模型，簡單講就是，在主軸方向確定的情況下，只有行，沒有列。

我們熟悉的二維佈局模型有哪些呢？有display: table和display: grid。而我們今天要講的display: flex就是妥妥的一維佈局模型了。

直接看圖。

可以看到，Flexbox有行的概念，卻沒有列的概念。這導致它的表達能力是受限的。

概念

我們如何確定一條短線是中文的一還是阿拉伯數字的1呢？

你可能覺得我在搞笑。一眼看過去，橫向的不就是中文的一，縱向的不就是阿拉伯數字的1麼。

是的。那是因為我們遵循著一些預設的約定：兩眼連成的線確定了水平方向。

Flexbox也是這個道理。它是一個一維佈局模型，我們就要找到確定僅有的維度的那根線。

這就引出了Flexbox的第一個概念：主軸(mian axis)與交叉軸(cross axis)。主軸就是那根僅有的維度線。兩眼連成的線與主軸方向保持平行，這就是肉眼看待Flexbox的正確方式。否則有時候它會顯得很彆扭。

然後我們再來說彈性盒子。既然它是一個盒子，那肯定得有容器，也得有內容。

也就引出了Flexbox的第二個概念：彈性容器(flex container)與彈性專案(flex item)。

你可以將彈性容器理解為冷戰時期的柏林，各方國際政治勢力自然就是若干彈性專案了。幾個國際大流氓聚在一起開會討論什麼呢？當然是開會討論如何瓜分柏林咯。是的，彈性盒模型討論的就是彈性專案如何瓜分彈性容器這一溫馨的話題。

上一小節我們提到過，Flexbox是一維佈局模型。它帶來的結果就是Flexbox有行的概念，卻沒有列的概念。

所以引出Flexbox的第三個概念：行(line)。

直接看圖。

最小長度

如果彈性容器有富餘空間，那好說，大家分就是了。而如果彈性容器空間不夠，彈性專案不僅沒得分，大家還得擠一擠。那麼問題就來了，擠不是無限制的擠，我們們就來探討一下，擠到什麼程度，是可忍孰不可忍？

舉個例子。

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
}
複製程式碼

兩個彈性專案的長度加起來的和已經超過了彈性容器，所以不得不擠壓。擠壓的比率我們們先不考慮，我們們先觀察擠壓的方式。有沒有發現紅色部分都有不同程度的收縮，但是黃色部分卻巋然不動？

黃色部分是什麼？是彈性容器的padding和彈性專案的margin。盒子模型我們們都瞭解吧，除了padding、margin和border之外，是不是隻剩content了？

我們們可以大膽猜測，Flexbox只敢欺負盒子模型的content，其餘都是大爺，惹不起。

別急，再來驗證一下。

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
    padding: 0 450px;
}
複製程式碼

這下是不是很清楚了？第一個彈性專案的content長度已經變成了0；第二個也好不到哪去，因為盒子長度都被padding佔據，它的content長度實際上也是0。都把人家擠破產了，卻絲毫不敢動其他的屬性，勢利眼無疑了。

我們再來看一個有意思的例子。

.container {
    display: flex;
    width: 850px;
    padding: 5px;
}
.container .item {
    width: 200px;
    height: 50px;
    margin: 5px;
}
.container .item:nth-child(2) {
    width: 1000px;
    padding: 0 300px;
}
.container .item .inner {
    width: 500px;
    height: 100%;
}
複製程式碼

我在第二個彈性專案中放了一個長500px的元素，結果你猜怎麼著，彈性專案的padding竟然有一部分和元素重合了。連子元素都未能倖免。

一般來說盒子模型的content都是被文字撐開的，我們最後再來看看文字的情況。

在彈性專案顯式設定了寬度的情況下，彈性專案並不能完全包裹文字。也就是說文字也幫不了它，既然它宣告瞭寬度，文字撐開的長度最多不能超過顯式宣告的寬度，超出的文字只能溢位。

而沒有顯式宣告寬度的情況，文字的寬度就是彈性專案盒子模型的content，Flexbox也拿它沒辦法。

總結一下：當富餘空間不夠時，Flexbox只會擠壓彈性專案的content，其餘如padding 、margin和border完全不受影響。同時彈性專案沒有顯式宣告寬度的情況下，Flexbox也不會擠壓文字。

display

從這裡開始，我們就要講具體的CSS屬性了。

display有兩個和Flexbox相關的屬性，分別是display: flex和display: inline-flex。

對於容器內部的專案來說，效果是一樣的。它們的區別在於容器自身應該以塊元素還是行內元素的身份立命。包括table也有這樣的區分，就不多講了。

flex-direction

這個屬性宣告的是主軸的方位和方向。

首先，主軸可不一定是水平的，主軸切換了那可就什麼都變了。

其次，主軸宣告的資訊有兩個，分別是：

• 它是水平的還是垂直的？
• 它在水平或垂直維度上是從左到右還是從右到左？

所以這裡也涉及到四個屬性值。

.container {
    flex-direction: row(default) | row-reverse | column | column-reverse;
}
複製程式碼

flex-wrap

這個屬性宣告的是當容器中的專案一行放不下的時候，是讓大家擠一擠呢，還是換行。

其實這裡也包含兩個資訊：

• 要不要換行？
• 如果需要換行就會形成多行，多行是從上到下排列還是從下到上排列？

.container {
    flex-wrap: nowrap(default) | wrap | wrap-reverse;
}
複製程式碼

如果把flex-direction和flex-wrap結合起來，大家會不會懵逼？上上下下左左右右。其實不管它怎麼reverse，flex-direction反轉的是主軸的方向，flex-wrap反轉的交叉軸的方向。

抓住一些概念性的東西，就不會懵逼了。

flex-flow

這是一個集合屬性，可以同時定義flex-direction和flex-wrap。

也就是說，這一個屬性可以一站式宣告主軸和交叉軸的特性。

.container {
    flex-flow: row-reverse wrap-reverse;
}
複製程式碼

justify-content

這個屬性宣告每行內的專案如何水平對齊。

把彈性容器一行內的專案想象成一行行內元素，justify-content和text-align的食用方式是一樣的。

.container {
    justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;
}
複製程式碼

flex-start、flex-end和center非常表意，我們們按下不表。

解釋一下後面三個屬性值：

• space-between表示兩頭的專案對齊容器壁，專案與專案之間的空隙平均分配。所謂的between指的就是專案之間。
• space-around表示兩頭的專案與容器壁保留一個單位的空隙，專案與專案之間保持兩個單位的空隙。around翻譯成中文是周圍，指的就是每個專案左右兩邊的空隙平均分配。
• space-evenly表示兩頭的專案與容器壁之間的空隙和專案與專案之間的空隙都保持一個單位。evenly翻譯成中文是均勻，指的是所有空隙平均分配。

align-items

這個屬性宣告每行內的專案如何垂直對齊。

.container {
    align-items: stretch(default) | flex-start | flex-end | center | baseline;
}
複製程式碼

這裡有一個問題，如果彈性專案顯式的宣告瞭高度，那stretch將不再起作用。所以這裡的例子，我往專案中加了一個子元素，把高度顯式的宣告在子元素上，這樣專案的高度就是被撐開的。

<div class="container">
    <div class="item"><div class="inner">1</div></div>
    <div class="item"><div class="inner">2</div></div>
    <div class="item"><div class="inner">3</div></div>
</div>
複製程式碼

可以看到，預設情況下，行內的彈性專案會拉伸，相當於宣告瞭高度100%。一旦專案顯式的宣告瞭高度，拉伸就不再起作用了。

align-content

這個屬性將容器的一行視為最小單位。它宣告的是如果容器的交叉軸方向有富餘空間，每行應該如何垂直對齊。

.container {
    align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;
}
複製程式碼

這裡也一樣，如果彈性專案顯式的宣告瞭高度，那stretch將不再起作用。

同時有兩點需要注意：

• 彈性容器需要顯式的宣告高度，而且高度必須高於所有行的高度和，否則去哪來的富餘空間呢？
• 如果容器內只有一行，也就是說不需要換行或者不允許換行，那align-content屬性將無法生效，因為它是作用於行的，只有一行也敢叫老子跑一趟？

為什麼沒有justify-items

如果你同時瞭解display: flex和display: grid，也許你會發現它們都有xx-items和xx-content屬性。但是別急，再進一步深究，發現Flexbox少了一個justify-items。

我們先來闡述一下xx-items和xx-content作用範圍有什麼區別。

• xx-items作用於專案，這意思很明朗。
• xx-content又是作用於什麼呢？肯定是比專案更大的單位，又聯想Flexbox的align-content是作用於行，我們可以大膽猜測xx-content作用於行或者列。

點破到這裡，大家應該有點眉目了吧？Flexbox是一維佈局模型，它根本沒有列的概念。

你說不對呀，既然Flexbox沒有列的概念，那不是應該沒有justify-content屬性，而應該有justify-items屬性麼？

話是這麼說，我當初也是這麼認為的。

但後來仔細想一想，Flexbox的align-items宣告的是一行內的專案如何垂直對齊，與之相對，justify-items宣告的就應該是一列內的專案如何水平對齊。好像更離譜。而如果將彈性容器一行內的每個專案都當做一列，justify-content似乎就說的通了。

這就好比討論螃蟹的螯到底是不是手一樣，怎麼都覺得彆扭。只能找一個相對更合理的說法了。

提出這個問題沒別的意思，只是想加深大家對Flexbox的理解。

order

從這裡開始，涉及到的屬性都是彈性專案自身的屬性。在大的格局確定的情況下，專案之間也是可以有一些騰挪空間的。

這個屬性宣告的是彈性專案自身的次序。只要顯式宣告瞭不是預設值0的整數，專案顯示的次序將會不同於原始碼定義的次序。

這個主要是留給JavaScript動態控制專案的次序用的，非動態直接修改原始碼的次序就好了。

.item {
    order: <integer>; /* default is 0 */
}
複製程式碼

flex-grow

這個屬性宣告的是彈性專案是否要瓜分行內的富餘空間，以及如何瓜分。

屬性值只允許正整數。

.item {
    flex-grow: <number>; /* default is 0 */
}
複製程式碼

首先解釋一下什麼是富餘空間：它是在彈性容器規則和彈性專案顯式寬度或者內容的共同約束下，行內剩餘的水平空間。比如圖例中除去margin、padding的黃色部分。

行內的富餘空間是如何被瓜分的呢？

首先，彈性專案要提出申請。比如第一個專案提出flex-grow: 1，意思是說它想要一份富餘空間。至於一份富餘空間是多少畫素，目前還不能確定。

等所有專案都申請完畢，計算申請的總份數。已知富餘空間長度和申請總份數，就能知道一份富餘空間是多少畫素。

最後根據每人提出申請的份數，分配富餘空間。

只有當行內有富餘空間時，flex-grow屬性才會生效。行內空間已經預先被瓜分完甚至不夠時，該屬性就管不了了。

flex-shrink

這個屬性宣告的是彈性專案是否要瓜分行內的負債空間，以及如何瓜分。

屬性值只允許正整數。

.item {
    flex-shrink: <number>; /* default is 1 */
}
複製程式碼

同樣，解釋一下什麼是負債空間：它是在彈性容器規則和彈性專案顯式寬度或者內容的共同約束下，行內短缺的水平空間。此時如果不換行的話，就要求擠壓彈性專案的長度。

行內的負債空間的瓜分規則與富餘空間的瓜分規則大致相同。

首先，彈性專案要提出申請。只不過這時的份額就不再是我要多少，而是我還多少。

等所有專案都申請完畢，計算申請的總份數。

這裡的問題在於，計算負債空間的長度稍微比較複雜。我們在文章一開始探討過彈性專案最小長度的話題，這裡再次總結一下：

• 彈性容器只會擠壓彈性專案的content，其餘如padding、margin和border不受影響。
• 如果彈性專案內有文字或者固定寬度的子元素，這又分兩種情況。第一種是專案本身沒有顯式宣告寬度，則最小長度以子元素的長度為準；第二種是專案本身顯式宣告瞭寬度，則最小長度以子元素的長度為準，但不能超過專案本身的寬度。結合上面圖例中最後兩個例子，更容易理解(我知道你已經懵逼了)。

最後根據每人提出申請的份數，分配負債空間。就是還債。

為什麼flex-grow屬性的預設值是0，而flex-shrink屬性的預設值是1呢？

因為預設情況下，如果有富餘空間我可以不要的，但是有負債空間又無法換行的話，我不得不要。所以flex-shrink屬性的預設值是1，意思就是預設情況下，如果空間不夠則大家平均的被擠壓。

你可以將所有專案的flex-shrink屬性值設定為0，如此這般所有專案都鐵骨錚錚、不畏強權了。見上面圖例的第四個例子。

flex-basis

這個屬性宣告的是預先分配給彈性專案的長度。它是width屬性的替代品，優先順序比width高。

.item {
    flex-basis: <length> | auto; /* default is auto */
}
複製程式碼

如果width和flex-basis都顯式的宣告瞭一個非auto的值，那麼flex-basis的優先順序更高。否則，哪個顯式宣告瞭就以哪個為準。

確實不太清楚制定flex-basis屬性標準的意義何在。

它們的區別好像僅限於屬性值為0的情況。width: 0我們都知道表示沒有寬度，見上面圖例的第二個例子；而flex-basis: 0表示以內容的寬度為寬度，見上面圖例中的第三個例子。

flex

這是一個集合屬性，可以同時定義flex-grow、flex-shrink和flex-basis。

你可以集合三個屬性的值，也可以只寫flex-grow一個屬性的值。

.item {
    flex: <'flex-grow'> | <'flex-grow'> <'flex-shrink'> <'flex-basis'>;
}
複製程式碼

align-self

這個屬性宣告的是彈性專案自身在行內的垂直對齊方式。

“我就是我，是顏色不一樣的煙火”。

.item {
    align-self: auto(default) | stretch | flex-start | flex-end | center | baseline;
}
複製程式碼

除了auto之外，align-self的屬性值和align-items的屬性值是一樣的，效果也一樣。

align-items: auto是說我預設服從集體，不自搞一套，所以才會多這麼個屬性值。

為什麼有align-self屬性而沒有justify-self屬性呢？

這個問題我們討論過吧？因為沒有jusifty-items屬性，所以justify-self屬性也無從談起。

你看人家Grid就有justify-self屬性。

其他

有一個小遊戲 Flexbox Froggy 可以幫助你輕鬆的實踐Flexbox的各項特性。

本文是『horseshoe·Flex專題』系列文章之一，後續會有更多專題推出

GitHub地址(持續更新)：horseshoe

部落格地址(文章排版真的很漂亮)：veedrin.com

如果覺得對你有幫助，歡迎來 GitHub 點 Star 或者來我的部落格親口告訴我