Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
任何一個容器都可以指定為Flex布局。
#box{
display: flex;
width: 500px;
height: 300px;
border: 10px solid red;
}
一：有六個屬性設置在box父容器上，來控制子元素的顯示方式；分別是：
- flex-direction 設置主軸對齊方式 默認 row x軸從左到右；
- flex-wrap 子元素換行的方式 默認nowrap ；
- flex-flow flex-direction和flex-wrap的簡寫 默認row nowrap；
- justify-content 子元素的對齊方式 默認flex-start 左對齊
- align-items
- align-content
1、flex-direction 決定主軸的對齊方向，分別有四個屬性：
row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。-
#box{ display: flex; flex-direction: row; } .inner{ width: 100px; height: 100px; background: #8a4182; margin: 10px; }
<div id="box"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
例如上面代碼，主軸就是x軸橫向的；起點在左端，從左到右排列；
2. flex-wrap ：定義子元素超過一行，如何換行，分別有三個屬性：
- nowrap（默認值）：默認不換行。
- wrap：換行，第二行在第一行下面，從左到右
- wrap-reverse：換行，第二行在第一行上面，從左到右；
2.1 nowrap：不換行，如果子元素超過父元素的寬度或者高度，會自動在主軸方向壓縮
下面的例子，主軸是x軸，默認不換行，但是父元素的寬度是500，子元素明顯大於父元素寬度，會默認寬度變窄；
#box{ display: flex; flex-direction: row; width: 500px; border: 1px solid red; }
2.2 wrap：換行，正常的折行
#box{ display: flex; flex-direction: row; flex-wrap: wrap; }
2.3 wrap-reverse 第二行在第一行上方；
#box{ display: flex; flex-direction: row; flex-wrap: wrap-reverse; }
3. flex-flow:是flex-direction 和flex-wrap的簡寫形式，默認是 row nowrap
flex-flow：flex-direction|flex-wrap ；
4. justify-content: 子元素在主軸對齊方式
flex-start（默認值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
flex-start和flex-end，center這三個都比較簡單，主要區分開下面的space-between和space-around；
space-between：兩端對齊，
space-around：
5 align-items：交叉軸如何對齊，如果flex-direction：row和row-reverse 那么交叉軸就是y軸，如果是column和column-reverse那么交叉軸是x軸
flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
baseline:以第一個子元素文字的基線對齊
stretch:子元素不設置高度，那么高度將沾滿整個父元素
6. align-content:屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線占滿整個交叉軸。
二 有六個屬性設置在子元素項目上：
orderflex-growflex-shrinkflex-basisflexalign-self
1. order 子元素排列的位置默認是按照html先后順序來排列的，html結構誰在前面默認就排列在前面；order的作用就是改變子元素排列順序
order：默認（0） 值越小越靠前，
<div id="box"> <div class="inner item">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> </div>
.inner:nth-child(5){ order: -1; }
2.flex-grow 放大比例 默認是0 當有放大空間的時候，值越大，放大的比例越大
flex-grow：0
.inner:nth-child(1){ flex-grow: 1; }
3.flex-shrink:縮小比例 默認是1 值越大，縮小的時候比例越小；
.inner:nth-child(5){
order: -1;
flex-shrink:24;
}
4.flex-basis 屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
flex-basis：200px ，如果項目有多余的空間，設置為200px。那么會放大到200的寬度；
5. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
6.align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
除了auto是表示繼承父元素，其他的跟align-items是一樣的。
參考文檔： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool