Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
彈性盒模型主要就分為 “伸縮容器”和“伸縮項(xiàng)目” 。伸縮容器我們可以簡單的理解為彈性盒模型父元素，伸縮項(xiàng)目就是彈性盒模型的子元素。
需要注意的是，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
<div>
<p>1</p><p>2</p><p>3</p><p>4</p>
</div>
伸縮容器(flex container)
div{
display : flex | inline-flex;
flex-direction : row | row-reverse | column | column-reverse;
flex-wrap : nowrap | wrap | wrap-reverse;
/* flex-flow : flex-direction, flex-wrap;*/
justify-content : flex-start | flex-end | center | space-between | space-around;
align-items : flex-start | flex-end | center | baseline | stretch;
align-content : flex-start | flex-end | center | space-between | space-around | stretch;
}
1. flex-direction
決定主軸方向（項(xiàng)目的排列方向）：
row : 水平方向 從左往右
row-reverse : 水平方向 從右往左
column : 豎直方向 從上往下
column-reverse : 豎直方向 從下往上
2. flex-wrap
是否換行
nowrap : 不換行
wrap : 換行 交叉軸方向從上往下 如果主軸是豎直方向,那么就是從左往右
wrap-reverse : 交叉軸方向從下往上 如果主軸是豎直方向,那么就是從右往左
3. flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。
4. justify-content
項(xiàng)目在主軸上的對(duì)齊方式
flex-start : 主軸起點(diǎn)對(duì)齊
flex-end : 主軸終點(diǎn)對(duì)齊
center : 主軸中點(diǎn)對(duì)齊
space-between : 兩端對(duì)齊，項(xiàng)目之間的間隔都相等
space-around : 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
5. align-items
項(xiàng)目在交叉軸上如何對(duì)齊
stretch : 如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
flex-start : 交叉軸的起點(diǎn)對(duì)齊
flex-end : 交叉軸終點(diǎn)對(duì)齊
center : 交叉軸中點(diǎn)對(duì)齊
baseline : 項(xiàng)目的第一行文字的基線對(duì)齊
6. align-items
定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
stretch : 項(xiàng)目實(shí)際高度會(huì)撐滿整個(gè)交叉軸的長度
flex-start : 交叉軸起點(diǎn)對(duì)齊
flex-end : 交叉軸終點(diǎn)對(duì)齊
center : 交叉軸中點(diǎn)對(duì)齊
space-between : 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布
space-around : 每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
伸縮項(xiàng)目(flex item)
p{
order : 0;
flex-grow : 0;
flex-shrink : 1;
flex-basis : auto;
/* flex : flex: none ; */
align-self : auto | flex-start | flex-end | center | baseline | stretch;
}
1. order
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
2. flex-grow
如何分配父元素多余部分,數(shù)值越大的分的越多，默認(rèn)為0（不分配）
3. flex-shrink
父元素寬度不夠的時(shí)候,項(xiàng)目是否收縮，數(shù)值越大的收縮的越多，默認(rèn)為1。
4. flex-basis
定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
5. flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self
單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
auto : 繼承父元素的align-items屬性
stretch : 項(xiàng)目實(shí)際高度會(huì)撐滿整個(gè)交叉軸的長度
flex-start : 交叉軸起點(diǎn)對(duì)齊
flex-end : 交叉軸終點(diǎn)對(duì)齊
center : 交叉軸中點(diǎn)對(duì)齊
baseline : 項(xiàng)目的第一行文字的基線對(duì)齊
