彈性布局flex是一個(gè)幾年前的CSS屬性了，說它解放了一部分生產(chǎn)力不為過。至少解放了不少CSS布局相關(guān)的面試題 :)
之前網(wǎng)上流行的各種XX布局，什么postion: absolute+margin，float+padding，各種都可以使用flex來取代之。
早兩年在使用的時(shí)候，還是會(huì)擔(dān)心有兼容性問題的，某些手機(jī)在使用了auto-prefixer以后依然會(huì)出現(xiàn)不兼容的問題。
好在現(xiàn)在已經(jīng)是2018年了，不必再擔(dān)心那些老舊的設(shè)備，希望這篇文章能幫你加深對(duì)flex的認(rèn)識(shí)。

準(zhǔn)備工作

首先，flex被稱為一個(gè)彈性盒模型，也有稱彈性布局的。
總之，盒子也好、布局也罷，我們總是需要有一個(gè)容器Container的：

<div class="container"></div>

以及如果單純的只是一個(gè)容器的話，是沒有任何意義的。
所以我們還需要有一些內(nèi)容：

<div class="contianer"><div class="item"></div><div class="item"></div> </div>

下邊的所有例子基本都是基于以上DOM結(jié)構(gòu)來做的。

基本語(yǔ)法

現(xiàn)在我們已經(jīng)有一個(gè)可以用來寫flex布局的html結(jié)構(gòu)。
接下來就是一個(gè)最基礎(chǔ)的flex布局的實(shí)現(xiàn)：

<style>.container {display: flex;height: 50px;color: #fff;border: 1px solid #03a9f4;}.item {flex: 1;text-align: center;background: #03a9f4;} </style> <div class="contianer"><div class="item"></div><div class="item"></div> </div>

我們?cè)谌萜魃鲜褂胐isplay: flex來告訴瀏覽器，這是一個(gè)flex布局的開始。
然后給所有的item添加一個(gè)flex: 1的屬性，來表明，我們這里邊所有的子元素會(huì)沿著主軸來平分所有的區(qū)域，就這樣，我們已經(jīng)實(shí)現(xiàn)了一個(gè)多列等寬布局。

關(guān)于flex，最重要的就是要記住他有兩條軸線（主軸、交叉軸），絕大部分屬性都是依賴于軸線的方向。

圖片來自MDN

因?yàn)閒lex布局分為了容器和內(nèi)容兩塊，各自有各自的屬性，所以就先從容器類的說起。

容器相關(guān)的flex屬性

實(shí)現(xiàn)上邊的需求，是依賴于很多默認(rèn)屬性值。
比如，為什么我們的子元素會(huì)橫向的進(jìn)行分割空間，而不是豎向的，這里就用到了一個(gè)屬性的默認(rèn)值：

flex-direction

flex-direction用于定義flex布局中的主軸方向。
默認(rèn)取值為row，是橫向的，表示從左到右，也就是說我們的所有子元素會(huì)按照從左到右的順序進(jìn)行排列。
我們可以通過設(shè)置值為column來改變主軸的方向，將其修改為從上到下。（改變flex-direction的值會(huì)影響到一些相關(guān)的屬性，會(huì)在下邊說到）

flex-direction共有四個(gè)有效值可選：

row 默認(rèn)值，從左到右

row-reverse 從右到左

column 從上到下

column-reverse 從下到上

P.S. 在React-Native中默認(rèn)的主軸方向?yàn)閏olumn

所以說flex-direction的作用就是：定義容器中元素的排列方向

flex-wrap

該屬性用于定義當(dāng)子元素沿著主軸超出容器范圍后，應(yīng)該按照怎樣的規(guī)則進(jìn)行排列。
該屬性只有簡(jiǎn)單的三個(gè)取值：

wrap 超出主軸范圍后換行顯示，換行方向按照交叉軸的方向來（默認(rèn)情況下就是折行到下一行）

wrap-reverse 超出主軸范圍后換行顯示，但是方向是交叉軸的反向（也就是默認(rèn)情況下第一行會(huì)出現(xiàn)在最下邊）

nowrap 即使超出容器也不會(huì)進(jìn)行換行，而是嘗試壓縮內(nèi)部flex元素的寬度（在下邊的子元素相關(guān)的屬性會(huì)講到）

三種取值的示例：

flex-flow

flex-flow是一個(gè)簡(jiǎn)寫的屬性，適用于上邊提到的flex-direction和flex-wrap

語(yǔ)法：

selector {flex-flow: <flex-direction> <flex-wrap>; }

justify-content

這個(gè)會(huì)定義我們的子元素如何沿著主軸進(jìn)行排列，因?yàn)槲覀兩线吺侵苯犹畛錆M了父元素，不太能看出效果。
所以我們對(duì)代碼進(jìn)行如下修改：

<style media="screen">.container {display: flex;width: 400px;color: #fff;border: 1px solid #03a9f4;}.item {/* flex: 1; */width: 100px;text-align: center;background: #03a9f4;} </style> <div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div> </div>

將所有的子元素都改為固定的寬度，也就是說，如果父元素有剩余空間的話，就會(huì)空在那里。
justify-content的默認(rèn)取值為normal，也可以認(rèn)為就是start了，也就是根據(jù)主軸的方向(flex-direction)堆在起始處。

幾個(gè)常用的取值：

center 必然首選的是center，能夠完美的實(shí)現(xiàn)沿主軸居中

flex-start 沿著主軸從行首開始排列

flex-end 沿著主軸從行末開始排列

以及幾個(gè)不太常用的取值：

space-between 將剩余空間在子元素中間進(jìn)行平分，保證沿主軸兩側(cè)不會(huì)留有空白。

space-around 將剩余空間均勻的分布在所有的子元素沿主軸方向的兩側(cè)，也就是說，主軸兩側(cè)也會(huì)有空白，但是必然是中間空白的1/2大小。

space-evenly 將剩余空間在所有元素之間平均分配，主軸兩側(cè)的空白面積也會(huì)與中間的面積相等。

六種效果的示例：

Warning

有一點(diǎn)需要注意，justify-content的取值都是依照flex-direction所定義的主軸方向來展示的。
也就是說，center在默認(rèn)情況下用于水平居中，在flex-direction: column-*時(shí)，則是作為垂直居中來展示的。

align-content

同樣的，align-content也是用來控制元素在交叉軸上的排列順序，但是既然會(huì)出現(xiàn)兩個(gè)屬性（align-items和align-content），勢(shì)必兩者之間會(huì)有一些區(qū)別。

因?yàn)閍lign-content只能作用于多行情況下的flex布局，所以取值會(huì)更接近額旋轉(zhuǎn)后的justify-content，同樣的可以使用space-between之類的屬性值。

因?yàn)槿≈祷绢愃?#xff0c;所以不再重復(fù)上邊justify-content所列的表格，直接上效果：

align-items

align-items與上邊的justify-content類似，也適用于定義子元素的排列方式。
不同的是，align-items作用于交叉軸（也就是默認(rèn)flex-direction: row情況下的從上到下的那根軸線）
目測(cè)平時(shí)用到的最多的地方就是水平居中吧（我現(xiàn)在懶的：只要有圖標(biāo)、表單 & 文字 的單行混合，都會(huì)選擇align-items: center來實(shí)現(xiàn):)）

常用的取值：

center 常用來做垂直(交叉軸)居中

flex-start 沿著交叉軸的起始位置排列

flex-end 與flex-start方向相反

stretch 將元素?fù)螡M容器的交叉軸寬度（在默認(rèn)情況下，這里指容器的高度，但是如果單純的說這條軸線，我覺得寬度更合適一些）

baseline 將元素按照文本內(nèi)容的基線進(jìn)行排列

以上取值的示例：

align-content與align-items的異同

兩者的相同點(diǎn)在于，都是設(shè)置元素在交叉軸上的排列順序。
而區(qū)別在于以下兩點(diǎn)：

align-content只能應(yīng)用于多行的情況下

align-content會(huì)將所有的元素認(rèn)為是一個(gè)整體并進(jìn)行相應(yīng)的處理、而align-items則會(huì)按照每一行進(jìn)行處理：

place-content

place-content可以認(rèn)為是justify-content和align-content的簡(jiǎn)寫了（事實(shí)上就是）

語(yǔ)法為：

selector {place-content: <align-content> <justify-content>; }

P.S. 如果單行(元素)想要實(shí)現(xiàn)居中還是老老實(shí)實(shí)的使用align-items+justify-content吧 :)

子元素的屬性們

有關(guān)容器的所有屬性都已經(jīng)列在了上邊，下邊的一些則是在容器內(nèi)元素設(shè)置的屬性。

flex-grow

flex-grow用來控制某個(gè)子元素在需要沿主軸填充時(shí)所占的比例，取值為正數(shù)（浮點(diǎn)數(shù)也可以的）。

selector {flex-grow: 1;flex-grow: 1.5; }

舉例說明：
如果一個(gè)容器中有三個(gè)元素，容器剩余寬度為100px，三個(gè)元素需要進(jìn)行填充它。
如果其中一個(gè)元素設(shè)置了flex-grow: 2，而其他的設(shè)置為1(默認(rèn)不設(shè)置的話，不會(huì)去填充剩余寬度)
則會(huì)出現(xiàn)這么一個(gè)情況，第一個(gè)元素占用50px，而其他兩個(gè)元素各占用25px。

Warning

這里需要注意的一點(diǎn)是，flex-grow定義的是對(duì)于剩余寬度的利用。
元素自身占用的空間不被計(jì)算在內(nèi)，為了驗(yàn)證上邊的觀點(diǎn)，我們進(jìn)行一個(gè)小實(shí)驗(yàn)。
給每一個(gè)元素設(shè)置一個(gè)padding-left: 20px，保證元素自身占用20px的位置，然后分別設(shè)置flex-grow來查看最后元素的寬度是多少。

.container {display: flex;width: 160px;height: 20px;align-items: stretch; }.item {flex-grow: 1;padding-left: 20px; }.item:first-of-type {flex-grow: 2; }

我們給容器設(shè)置了寬度為160px（為了方便的減去padding-left計(jì)算）。
最后得到的結(jié)果，設(shè)置了flex-grow: 2的元素寬度為70px，而設(shè)置flex-grow: 1的元素寬度為45px。
在減去了自身的20px以后，50 / 25 === 2 // true。

flex-shrink

flex-shrink可以認(rèn)為是與flex-grow相反的一個(gè)設(shè)置，取值同樣是正數(shù)。
用來設(shè)置當(dāng)容器寬度小于所有子元素所占用寬度時(shí)的縮放比例。
比如說，如果我們的容器寬為100px，三個(gè)元素均為40px，則會(huì)出現(xiàn)容器無法完全展示所有子元素的問題。
所以默認(rèn)的flex會(huì)對(duì)子元素進(jìn)行縮放，各個(gè)元素要縮放多少，則是根據(jù)flex-shrink的配置來得到的（默認(rèn)為1，所有元素平均分?jǐn)?#xff09;
就像上邊的例子，如果我們還是三個(gè)元素，第一個(gè)設(shè)置了flex-shrink: 2，則最終得到的結(jié)果，第一個(gè)元素寬度為30px，其余兩個(gè)元素的寬度為35px。

.container {display: flex;width: 100px;height: 20px;align-items: stretch; }.item {width: 40px;/* flex-shrink: 1; it's default value */font-size: 0;background: #03a9f4; }.item:first-of-type {flex-shrink: 2; }

flex-basis

這個(gè)屬性用來設(shè)置元素在flex容器中所占據(jù)的寬度（默認(rèn)主軸方向），這個(gè)屬性主要是用來讓flex來計(jì)算容器是否還有剩余面積的。
默認(rèn)取值為auto，則意味著繼承width（direction: column時(shí)是height）的值。
一般來講很少會(huì)去設(shè)置這個(gè)值。

flex

flex則是上邊三個(gè)屬性的簡(jiǎn)寫，語(yǔ)法如下：

selector {flex: <flex-grow> <flex-shrink> <flex-basis>; }

一般來講如果要寫簡(jiǎn)寫的話，第三個(gè)會(huì)選擇設(shè)置為auto，也就是獲取元素的width。

align-self

效果如同其名字，針對(duì)某一個(gè)元素設(shè)置類似align-items的效果。
取值與align-items一致，比如我們可以針對(duì)性的實(shí)現(xiàn)這樣的效果：

.center :first-child {align-self: stretch; }.flex-start :first-child {align-self: flex-end; }.flex-end :first-child {align-self: flex-start; }.stretch :first-child {align-self: center; }

order

以及最后這里還有一個(gè)order屬性，可以設(shè)置在展示上的元素順序。
取值為一個(gè)任意整數(shù)。

默認(rèn)的取值為1，如果我們想要后邊的元素提前顯示，可以設(shè)置如下屬性：

.item:last-of-type {order: -1; }

P.S. 這個(gè)順序的改變只是顯示上的，不會(huì)真正的改變html的結(jié)構(gòu)，比如，你依然不能通過.item:last-of-type ~ .item來獲取它在視覺上后邊的兄弟元素
當(dāng)order重復(fù)時(shí)，按照之前的順序排列大小

總結(jié)

flex相關(guān)的屬性如何拆分以后，并不算太多。
腦海中有主軸和交叉軸的概念之后，應(yīng)該會(huì)變得清晰一些。
關(guān)于上述所有屬性的一個(gè)簡(jiǎn)單總結(jié)：

容器相關(guān)

屬性名作用

flex-direction	用來設(shè)置主軸的方向，最基礎(chǔ)的屬性，默認(rèn)從左到右，此屬性一改，下列所有的屬性都要跟著改，真可謂牽一發(fā)而動(dòng)全身
flex-wrap	設(shè)置元素超出容器后的換行規(guī)則，默認(rèn)不換行
justify-content	設(shè)置沿主軸的排列規(guī)則
align-content	設(shè)置沿交叉軸的排列規(guī)則
align-items	以行（默認(rèn)direction情況下）為單位，設(shè)置沿交叉軸的排列規(guī)則

元素相關(guān)

屬性名作用

flex-grow	當(dāng)容器大于所有元素時(shí)，按什么比例將剩余空間分配給元素
flex-shrink	當(dāng)容器小于所有元素時(shí)，元素按照什么比例來縮小自己
flex-basis	很少用的屬性，設(shè)置在容器中的寬(高)
align-self	針對(duì)某些元素單獨(dú)設(shè)置align-items相關(guān)的效果
order	設(shè)置元素在顯示上的順序

簡(jiǎn)寫

屬性名作用

flex-flow	flex-direction與flex-wrap的簡(jiǎn)寫
place-content	justify-content與align-content的簡(jiǎn)寫
flex	flex-grow、flex-shrink與flex-basis的簡(jiǎn)寫

以及文中所有的示例代碼都在這里 code here。

參考資料

How Flexbox works?(此文中的一些gif圖真心贊)

Understanding Flexbox: Everything you need to know

Learn CSS Flexbox in 5 Minutes

P.S. 先立一個(gè)flag，后續(xù)還會(huì)出一篇各種flex的真實(shí)場(chǎng)景應(yīng)用，畢竟，紙上談兵沒有意義

總結(jié)

以上是生活随笔為你收集整理的Flex入坑指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。