一、起步
1、flex介紹
使用flex彈性布局的元素，稱為flex 容器（flex-container）。它的所有子元素自動成為容器成員，稱為 flex 項目（flex-item）。
即需要分為兩個部分，一為flex-container，另一部分為flex-item，flex-item包含于flex-container中，如下面代碼中，類名為“container”的div塊為flex-container，div中所包含的類名為“item1”、“item2”、“item3”的div塊均為flex-item。
注意：設為 flex布局以后，子元素的float、clear和vertical-align屬性將失效。
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
.container {
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
}
.item {
width: 100px;
height: 100px;
color: #fff;
line-height: 100px;
text-align: center;
}
.item1 {
background-color: #f00;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: #00f;
}
二、flex主軸概念
（1）彈性布局開啟后flex-container元素默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
（2）主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；
（3）交叉軸的開始位置叫做cross start，結束位置叫做cross end。
（4）flex-item元素默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
二、開啟flex布局
對flex-container以及其中的flex-item開啟flex布局，需在flex-container做如下設置：
.container{
width: 500px;
height: 400px;
background-color: orange;
margin: 0 auto;
display:flex || inline-flex;
// 開啟flex布局，當display為flex，此容器為塊級元素，當為inline-flex時為行內元素
//Webkit 內核的瀏覽器，必須加上-webkit前綴，即-webkit-flex。
}
//其他item屬性暫時不變
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
<span>我是行內元素</span>
分布如下圖所示：
三、flex-container屬性
flex-container可設置如下6種屬性：
（1）flex-direction：控制主軸放方向，默認屬性為row
（2）justify-content：決定了flex-item與main axis上的對齊方式
（3）align-items：決定了flex-item與cross axis上的對齊方式
（4）flex-wrap：決定了flex container是單行和多行
（5）flex-flow為flex-direction和flex-wrap的縮寫屬性
（6）align-content決定了多行flex-item與cross axis上的對齊方式，用法與justify-content相似
1、flex-direction有如下4個選項：
（1）row：flex-direction控制主軸方向，默認屬性為row。
（2）row-revers：翻轉主軸方向。
（3）column：主軸方向改為豎直方向。
（4）column-reverse：翻轉此時的主軸方向。
.container {
flex-direction:row || row-reverse|| column || column-reverse || column-reverse;
// flex-direction：控制主軸方向，默認屬性為row
// row-revers：翻轉主軸方向
// column：主軸方向改為豎直方向
// column-reverse：翻轉此時的主軸方向
}
示例如下：
2、justify-content：決定了flex-item與main axis上的對齊方式
（1）flex-start（默認值）：與main start對齊
（2）flex-end：與main end對齊
（3）center：居中對齊
（4）space-between： flex-item之間距離相等，與main start main end兩端對齊
（5）space-around： flex-item之間距離相等，flex-item與main start、main end之間的距離等于flex-item之間的距離
（6）space-evenly： flex-item之間距離相等，flex-item與main start、main end之間的距離是flex-item之間的距離的一半
.container {
justify-content: flex-start || flex-end || center || space-between || space-around
// flex-start（默認值）：與main start對齊
// flex-end：與main end對齊
// center：居中對齊
// space-between： flex-item之間距離相等，與main start、main end兩端對齊
// space-around： flex-item之間距離相等，flex-item與main start、main end之間的距離等于flex-item之間的距離
// space-evenly： flex-item之間距離相等，flex-item與main start、main end之間的距離是flex-item之間的距離的一半
}
示例如下：
3、align-items：決定了flex-item與cross axis上的對齊方式
（1）normal:與stretch效果一樣
（2）stretch：當flex-item在cross axi放下的size為auto時，會自動拉伸填充至flex container
（3）flex-start（默認值）：items在cross start對齊
（4）flex-end：在cross end對齊
（5）center：居住對齊
（6）baseline：基準線對齊
.container {
align-items: normal || stretch || flex-start || flex-end || center || baseline
// normal: 與stretch效果一樣
// stretch：當flex-item在cross axi放下的size為auto時，會自動拉伸填充至flex container
// flex-start（默認值）：items在cross start對齊
// flex-end：在cross end對齊
// center：居住對齊
// baseline：基準線對齊
}
示例如下：
4、flex-wrap：決定了flex container是單行和多行
（1）nowrap（默認值）：單行
（2）wrap：多行，當第一行最后剩的距離占不下時，會按cross方向等分的flex container部分對齊分配第二行
（3）wrap-reverse：多行（對比wrap，cross start與cross end相反）
.container {
flex-wrap: nowrap || wrap || wrap-reverse
// nowrap（默認值）：單行
// wrap：多行，當第一行最后剩的距離占不下時，會按cross方向等分的flex container部分對齊分配第二行
// wrap-reverse：多行（對比wrap，cross start與cross end相反）
}
5、flex-flow：為flex-direction和flex-wrap的縮寫屬性
例如：
.container {
flex-flow：column wrap
}
6、align-content：決定了多行flex-item與cross axis上的對齊方式，用法與justify-content相似
（1）stretch（默認值）：與align-items的stretch效果一樣
（2）flex-start：與cross start對齊
（3）flex-start：與cross end對齊
（4）center居住對齊
（5）space-between： flex-item之間距離相等，與cross start、cross end兩端對齊
（6）space-around： flex-item之間距離相等，flex-item與cross start、cross end之間的距離等于flex-item之間的距離
（7）space-evenly： flex-item之間距離相等，flex-item與cross start、cross end之間的距離是flex-item之間的距離的一半
.container {
align-content：stretch || flex-start || flex-end || center || space-between || space-around || space-evenly
// stretch（默認值）：與align-items的stretch效果一樣
//flex-start：與cross start對齊
//flex-end：與cross end對齊
//center居住對齊
//space-between： flex-item之間距離相等，與cross start、cross end兩端對齊
//space-around： flex-item之間距離相等，flex-item與cross start、cross end之間的距離等于flex-item之間的距離
//space-evenly： flex-item之間距離相等，flex-item與cross start、cross end之間的距離是flex-item之間的距離的一半
}
示例如下：
四、flex-item中的屬性
flex-item共用6個設置屬性，如下所示：
（1）order：定義項目的排列順序。數值越小，排列越靠前，默認為0 。
（2）align-self：覆蓋flex:-container設置的align-items。
（3）flex-grow：決定了flex-item放大比例，默認為0，即如果存在剩余空間，也不放大。
（4）flex-shrink決定了flex-item縮小比例，默認為1，即如果空間不足，該項目將縮小。
（5）flex-basis屬性定義了在分配多余空間之前，flex-item占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即flex-item的本來大小。
（6）flex是flex-grow || flex-shrink || flex-basis的簡寫，flex屬性可以指定1個，2個，3個值。
1、order：定義項目的排列順序
（1）可以設置任意整數（正整數、負整數、0），值越小越排在前面
（2）默認值是0
示例如下：
2、align-self：覆蓋flex-container設置的align-items。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
示例：
3、flex-grow：可以設置任意非負數字（正小數、正整數、0），默認值是0
（1）當flex-container在main axis有剩余size時才會生效
（2） 如果所有flex-item的flex-grow總和sum超過1，每個flex-item擴展的size為：flex-container的剩余size * flex-grow/sum
（3）如果所有flex-item的flex-grow總和sum不超過1，每個flex-item擴展的size為：flex-container的剩余size * flex-grow
（4）flex-item擴展后的所有size不能超過max-width
示例:
4、flex-shrink可：以設置任意非負數字（正小數、正整數、0），默認值是1
（1）當flex-item 在main axis上超過flex-container的size時才會生效
（2）如果所有flex-item的flex-shrink總和sum超過1，每個flex-item收縮的size為：flex-item超出flex-container的size * （收縮比例 / 所有flex-item收縮比例之和）
（3）如果所有flex-item的flex-shrink總和sum不超過1，每個flex-item收縮的size為：每個flex-item收縮的size為：flex-item超出flex-container的size * 所有flex-item收縮比例之和 * （收縮比例/所有flex-item收縮比例之和）
i. 收縮比例=flex-shrink * flex-item的base-size
ii. base-size就是flex-item放入flex-container之前的size
iii. flex items收縮后的所有size不能小于min-width
示例：
5、flex-basis：用來設置flex-item在main axis方向上的size，
（1）設置為auto為默認值，即為原來的大小、
（2）設置具體的寬度數值（100px)，即可改變flex-item的size
決定flex-item最終size的因素，從優先級高到底
i.max-width/max-height/min-width/min-height
ii.flex-basis
iii.width/height
iiii.內容本身的size
6、flex：是flex-grow || flex-shrink || flex-basis的簡寫，flex屬性可以指定1個，2個，3個值
（1）單值語法：值必須為以下其中之一：
一個無單位數（<number>):它會被當做flex-grow的值
一個有效的寬度（width）值：它會被當做flex-basis的值
關鍵字none，auto活initial
（2）雙值語法：第一個值必須為一個無單位數，并且會被當做flex-grow的值
第二個值必須為以下之一：
一個無單位數：它會被當做flex-shrink的值
一個有效的寬度值：它會被當做flex-basis的值
（3）三值語法：
第一個值必須為無單位數，并且會被當做flex-grow的值
第二個值必須為無單位數，并且會被當做flex-shrink的值
第二個值必須為一個有效的寬度值數，并且會被當做flex-basis的值
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
常用的示例：
