Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
任何一個(gè)容器都可以指定為Flex布局。
#box{
display: flex;
width: 500px;
height: 300px;
border: 10px solid red;
}
一：有六個(gè)屬性設(shè)置在box父容器上，來控制子元素的顯示方式；分別是：
flex-direction ? ?設(shè)置主軸對(duì)齊方式 ?默認(rèn) row ?x軸從左到右；
flex-wrap ? 子元素?fù)Q行的方式 ?默認(rèn)nowrap ；
flex-flow ? flex-direction和flex-wrap的簡(jiǎn)寫 默認(rèn)row nowrap；
justify-content ?子元素的對(duì)齊方式 ?默認(rèn)flex-start ?左對(duì)齊
align-items
align-content
1、flex-direction 決定主軸的對(duì)齊方向，分別有四個(gè)屬性：
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
#box{display:flex;flex-direction:row;}.inner{width:100px;height:100px;background:#8a4182;margin:10px;}
例如上面代碼，主軸就是x軸橫向的；起點(diǎn)在左端，從左到右排列；
2. ?flex-wrap ：定義子元素超過一行，如何換行，分別有三個(gè)屬性：
nowrap（默認(rèn)值）：默認(rèn)不換行。
wrap：換行，第二行在第一行下面，從左到右
wrap-reverse：換行，第二行在第一行上面，從左到右；
2.1 ?nowrap：不換行，如果子元素超過父元素的寬度或者高度，會(huì)自動(dòng)在主軸方向壓縮
下面的例子，主軸是x軸，默認(rèn)不換行，但是父元素的寬度是500，子元素明顯大于父元素寬度，會(huì)默認(rèn)寬度變窄；
#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的簡(jiǎn)寫形式，默認(rèn)是 row ?nowrap
flex-flow：flex-direction|flex-wrap ；
4. justify-content: ?子元素在主軸對(duì)齊方式
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
flex-start和flex-end，center這三個(gè)都比較簡(jiǎn)單，主要區(qū)分開下面的space-between和space-around；
space-between：兩端對(duì)齊，
space-around：
5 ?align-items：交叉軸如何對(duì)齊，如果flex-direction：row和row-reverse? 那么交叉軸就是y軸，如果是column和column-reverse那么交叉軸是x軸
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
baseline:以第一個(gè)子元素文字的基線對(duì)齊
stretch:子元素不設(shè)置高度，那么高度將沾滿整個(gè)父元素
6. align-content:屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
二 ? 有六個(gè)屬性設(shè)置在子元素項(xiàng)目上：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. ?order ?子元素排列的位置默認(rèn)是按照html先后順序來排列的，html結(jié)構(gòu)誰(shuí)在前面默認(rèn)就排列在前面；order的作用就是改變子元素排列順序
order：默認(rèn)（0） 值越小越靠前，
12345
.inner:nth-child(5){order:-1;}
2.flex-grow ?放大比例 ?默認(rèn)是0 ? 當(dāng)有放大空間的時(shí)候，值越大，放大的比例越大
flex-grow：0
.inner:nth-child(1){flex-grow:1;? ? }
3.flex-shrink:縮小比例 ?默認(rèn)是1 ?值越大，縮小的時(shí)候比例越??；
1
2
3
4.inner:nth-child(5){
order:-1;
flex-shrink:24;
}
4.flex-basis ?屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
flex-basis：200px ?，如果項(xiàng)目有多余的空間，設(shè)置為200px。那么會(huì)放大到200的寬度；
5. flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
6.align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為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
