flex 布局
Flex :Flexible box 彈性布局，用來為盒裝模型提供最大的靈活性。任何的容器都可以指定為Flex布局
.box{
diaplay:flex;
]
行內元素可以使用flex布局
.box{ display:inline-flex }
傳統的布局時基於盒裝模型 https://www.cnblogs.com/babilong/p/13355014.html，依賴於diaplay屬性，float屬性，position屬性。對於一些特殊的布局就比較麻煩。
Flex布局圖
圖示解讀：每一個Flex布局都有一個主軸（main axis）和交叉軸（cross axis）又叫縱軸。
主軸的起點main start到main end。
交叉軸起點cross start到cross end。
flex item是布局中的每一項即項目。
Flex的基本屬性
1.flex-direction 屬性決定了項目的排列方式
flex-direction ：row | row-reverse | column |column-reserve
row（默認）：項目橫向排列，方向由左向右
row-revserse：項目橫向排列，方向由右向左
column：項目縱向排列，方向由上到下
column-severse：項目縱向排列，方向由下到上
2.flex-wrap屬性 決定了項目排列滿屏，是否換行
flex-wrap：wrap | nowrap | wrap-reverse
nowrap（默認）：不換行
wrap:換行，第一行在上面
wrap-reverse：換行，第一行在下面
3.flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫。
flex-flow：<flex-direction> <flex-wrap>
默認 flex-diretion：row nowrap；
4.justify-content:決定了項目在主軸上的對齊方式
justify-content：flex-start | flex-end | center |space-bewteen |space-around
flex-start（默認）：左對齊
fle-end：右對齊
center：居中排列
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目的左右間隔都相等（每一個項目都被空白包圍，且左右間隔相等）
5.align-items屬性 決定了項目在交叉軸上的對齊方式
align-items：flex-start | flex-end | center | baseline | stretch
flex-start:上對齊
flex-end：下對齊
center：居中對齊
baseline：項目的第一行文字的基線對齊
stretch（默認）：如果項目沒有設置固定高度或設置為auto，項目則占滿整個屏幕
6.align-content屬性 決定了多根軸線的對齊方式
注意：若軸線只有一根則該屬性不會起作用
align-content：flex-start | flex-end | center | space-around | space-between | stretch
flex-start :與交叉軸的起點對齊，以上邊界排列
flex-end：與交叉軸的終點對齊，以下邊界排列
center：與交叉軸的中點對齊，中間排列
space-around：每根軸線的兩側間隔相等
space-between：與上邊界與下邊界兩端對齊，且每根軸線的間隔相等
stretch（默認）：軸線占滿交叉軸
