flex

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屬性。