flex布局（flexible布局，彈性布局），是目前web開發中使用的最多的布局方案。
兩個重要概念：
開啟flex布局的元素叫<code>flex container</code>；
<code>flex container</code>裡面的直接子元素叫做<code>flex items</code>；
設定display屬性為flex或者inline-flex可以成為flex container：
flex：使得<code>flex container</code>以塊級形式存在；
inline-flex：使得<code>flex container</code>以行内級形式存在；
當元素開啟flex布局時，會沿着兩個軸來進行布局。
主軸（main axis）：沿着flex元素放置的方向延伸的軸；
交叉軸（cross axis）：垂直于flex元素放置方向的軸；
<code>main start</code>和<code>main end</code>：分别為主軸的開始位置和結束位置；
<code>cross start</code>和<code>cross end</code>：分别為交叉軸的開始位置和結束位置；
<code>main size</code>和<code>cross size</code>：分别為主軸的大小和交叉軸的大小；
應用在flex container上的屬性
應用在flex items上的屬性
flex-flow
flex
flex-direction
flex-grow
flex-wrap
flex-basis
justify-content
flex-shrink
align-items
order
align-content
align-self
flex items預設都是沿着main axis（主軸）從main start往main end方向進行排布；
flex-direction決定了main axis的方向，有以下四個取值：
row（預設值）
row-reverse
column
column-reverse
justify-content決定了flex items在main axis上的對齊方式，有以下取值：
flex-start：預設值，與main start對齊；
flex-end：與main end對齊；
center：居中對齊；
space-between：flex items之間的距離相等，與main start、main end兩端對齊；
space-evenly：flex items之間的距離相等，與main start、main end之間的距離等于flex items之間的距離；
space-around：flex items之間的距離相等，與main start、main end之間的距離是flex items之間距離的一半；
align-items決定了flex items在cross axis上的對其方式，有以下取值：
normal：在彈性布局中，效果和stretch一樣；
stretch：當flex items在cross axis方向的size為auto時，會自動拉伸至填充flex container；
flex-start：與cross start對齊；
flex-end：與cross end對齊；
baseline：與基準線對齊；
flex-wrap決定了flex container是單行還是多行，有以下取值：
nowrap：預設值，單行；
wrap：多行；
wrap-reverse：多行（對比wrap，cross start和cross end相反）；
flex-flow是flex-direction | flex-wrap的簡寫；
可以省略，順序任意；
align-content決定了多行flex items在cross axis上的對齊方式，用法與justify-content類似，有以下取值：
stretch：預設值；
space-between：flex items之間的距離相等，與cross start、cross end兩端對齊；
space-around：flex items之間的距離相等，與cross start、cross end之間的距離是flex items之間距離的一半；
space-evenly：flex items之間的距離相等，與cross start、cross end之間的距離等于flex items之間的距離；
order決定了flex items的排布順序。
可以設定任意整數（正整數、負整數、0），值越小就越排在前面；
預設值是0；
flex items可以通過align-self覆寫flex container設定的align-items屬性。
auto：預設值，使用flex container設定的align-items屬性；
stretch、flex-start、flex-end、center、baseline屬性值效果跟align-items一緻；
如果想單獨某些items在cross axis上的對齊方式，就可以單獨給某個flex item設定align-self；
flex-grow決定了flex items如何擴充；
可以設定任意非負數字（正小數、正整數、0），預設值為0；
當flex container在main axis方向上有剩餘的空間時，flex-grow屬性才會生效；
如果所有flex items的flex-grow總和超過1，每個flex item擴充的size為：<code>flex container剩餘size * 目前flex item的flex-grow值 / sum</code>；
如果所有flex items的flex-grow總和不超過1，每個flex item擴充的size為：<code>flex container剩餘size * 目前flex item的flex-grow值</code>；
注意：flex itmes擴充後的最終size不能超過max-widht、max-height；
示例代碼：
運作結果：
如果給每個inner設定<code>flex-grow: 0.1;</code>，在剩餘的100px空間中，每個盒子各分<code>100px * 0.1 = 10px</code>的size；
如果給每個inner設定<code>flex-grow: 1;</code>，在剩餘的100px中，每個盒子各分<code>100px * 1 / 4 = 25px</code>；
flex-shrink決定了flex items如何收縮；
可以設定任意非負數字（正小數、正整數、0），預設值是1；
當flex items在mian axis方向上超過了flex container的size，flex-shrink屬性才會有效；
如果所有flex items的flex-shrink總和sum超過1，每個flex item收縮size為：<code>flex items超出flex container的size * 目前flex item的flex-shrink值 / sum</code>；
如果所有的flex items的flex-shrink總和sum不超過1，每個flex item收縮size為：<code>flex items超出flex container的size * sum * 收縮比例 / 所有flex items的收縮比例之和</code>；
<code>收縮比例 = 目前item的flex-shrink * flex item的base size</code>，base size就是flex item放入flex container之前的size；
flex items收縮後的最終size不能小于min-width、min-height；
示例代碼：設定flex container的大小為300px，每個flex items的大小為100px，一共4個超過了flex container的100px。
當設定<code>flex-shrink: 1</code>，或者不設定（預設值為1），每個flex item的大小收縮：<code>100px * 1 / 4 = 25px</code>，最終大小為<code>100px - 25px = 75px</code>；
當設定<code>flex-shrink: 0.1;</code>，每個flex item的大小收縮：<code>100px * 0.4 * 100px * 0.1 / 40px = 10px</code>，最終大小為<code>100px - 10px = 90px</code>
flex-basis用來設定flex items在main axis方向上的base size。
auto：預設值；
設定具體的寬度數值：會覆寫之前給flex items設定的width；
決定flex items最終base size的因素，優先級高到低排列如下：
max-width\max-height\min-width\min-height；
flex-basis；
width\height；
内容本身的size；
flex是flex-grow | flex-shrink | flex-basis的簡寫屬性，可以指定1、2或3個值。
指定1個值：
一個無機關數：會被當做<code>flex-grow</code>的值；
一個有效的寬度值：會被當做<code>flex-basis</code>的值；
關鍵字none、auto或initial；
指定2個值：
第一個值必須為一個無機關數，并且作為<code>flex-grow</code>的值；
第二個值必須為以下之一：
一個無機關數：會被當做<code>flex-shrink</code>的值；
指定3個值：
第一個值必須為無機關數：會被當做<code>flex-grow</code>的值；
第二個值必須為無機關數：會被當做<code>flex-shrink</code>的值；
第三個值必須為有效寬度值：會被當做<code>flex-basis</code>的值；