摘要：我們給容器設(shè)置了寬度為為了方便的減去計(jì)算。這個(gè)屬性用來(lái)設(shè)置元素在容器中所占據(jù)的寬度默認(rèn)主軸方向，這個(gè)屬性主要是用來(lái)讓來(lái)計(jì)算容器是否還有剩余面積的。

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

準(zhǔn)備工作

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

<div class="container">div>

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

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

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

基本語(yǔ)法

現(xiàn)在我們已經(jīng)有一個(gè)可以用來(lái)寫(xiě)flex布局的html結(jié)構(gòu)。
接下來(lái)就是一個(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è)谌萜魃鲜褂?code>display: flex來(lái)告訴瀏覽器，這是一個(gè)flex布局的開(kāi)始。
然后給所有的item添加一個(gè)flex: 1的屬性，來(lái)表明，我們這里邊的元素都是flex布局中的內(nèi)容，
我們會(huì)沿著主軸來(lái)平分所有的區(qū)域，就這樣，我們已經(jīng)實(shí)現(xiàn)了一個(gè)多列等寬布局。

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

圖片來(lái)自MDN

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

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

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

flex-direction

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

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

1. row 默認(rèn)值，從左到右
2. row-reverse 從右到左
3. column 從上到下
4. column-reverse 從下到上

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

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

flex-wrap

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

1. wrap 超出主軸范圍后換行顯示，換行方向按照交叉軸的方向來(lái)（默認(rèn)情況下就是折行到下一行）
2. wrap-reverse 超出主軸范圍后換行顯示，但是方向是交叉軸的反向（也就是默認(rèn)情況下第一行會(huì)出現(xiàn)在最下邊）
3. nowrap 即使超出容器也不會(huì)進(jìn)行換行，而是嘗試壓縮內(nèi)部flex元素的寬度（在下邊的子元素相關(guān)的屬性會(huì)講到）

三種取值的示例：

flex-flow

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

語(yǔ)法：

selector {
  flex-flow:  ;
}

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 1div>
  <div class="item">Item 2div>
  <div class="item">Item 3div>
div>

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

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

1. center 必然首選的是center，能夠完美的實(shí)現(xiàn)沿主軸居中
2. flex-start 沿著主軸從行首開(kāi)始排列
3. flex-end 沿著主軸從行末開(kāi)始排列

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

1. space-between 將剩余空間在子元素中間進(jìn)行平分，保證沿主軸兩側(cè)不會(huì)留有空白。
2. space-around 將剩余空間均勻的分布在所有的子元素沿主軸方向的兩側(cè)，也就是說(shuō)，主軸兩側(cè)也會(huì)有空白，但是必然是中間空白的1/2大小。
3. space-evenly 將剩余空間在所有元素之間平均分配，主軸兩側(cè)的空白面積也會(huì)與中間的面積相等。

六種效果的示例：

Warning

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

align-content

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

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

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

align-items

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

常用的取值：

1. center 常用來(lái)做垂直(交叉軸)居中
2. flex-start 沿著交叉軸的起始位置排列
3. flex-end 與flex-start方向相反
4. stretch 將元素?fù)螡M容器的交叉軸寬度（在默認(rèn)情況下，這里指容器的高度，但是如果單純的說(shuō)這條軸線，我覺(jué)得寬度更合適一些）
5. baseline 將元素按照文本內(nèi)容的基線進(jìn)行排列

以上取值的示例：

align-content與align-items的異同

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

1. align-content只能應(yīng)用于多行的情況下
2. 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)寫(xiě)了（事實(shí)上就是）

語(yǔ)法為：

selector {
  place-content:  ;
}

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

子元素的屬性們

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

flex-grow

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

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

舉例說(shuō)明：
如果一個(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來(lái)查看最后元素的寬度是多少。

.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ù)。
用來(lái)設(shè)置當(dāng)容器寬度小于所有子元素所占用寬度時(shí)的縮放比例。
比如說(shuō)，如果我們的容器寬為100px，三個(gè)元素均為40px，則會(huì)出現(xiàn)容器無(wú)法完全展示所有子元素的問(wèn)題。
所以默認(rèn)的flex會(huì)對(duì)子元素進(jìn)行縮放，各個(gè)元素要縮放多少，則是根據(jù)flex-shrink的配置來(lái)得到的（默認(rèn)為1，所有元素平均分?jǐn)?/em>）
就像上邊的例子，如果我們還是三個(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; its default value */
  font-size: 0;
  background: #03a9f4;
}

.item:first-of-type {
  flex-shrink: 2;
}

selector {
  flex:   ;
}

.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;
}

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