什么是flex布局？
傳統(tǒng)的布局方案是基于盒模型，依賴于display:block和float+position踏施，但是對于一些特殊的布局來說就不是很方便问畅，如在盒模型中垂直居中。
2009年W3C提出一種新的布局方案爆存，flex彈性盒布局蛉顽，目前兼容的瀏覽器有chrome opera IE Firefox Sifari?
flex兼容瀏覽器版本
但是在未來flex布局將會成為布局的首選方案。
flex是flexinle BOX的縮寫先较。意思是彈性布局携冤，用來為盒模型提供最大的靈活性悼粮。? ? 任何一個容器（標簽）都可以指定為flex布局。用display:flex曾棕；
如果給容器設置flex的時候當前容器內(nèi)子元素的float,clear,vericla-align都將會失效
flex的基本概念
容器默認存在兩根軸：水平的主軸（main axis）和垂直交叉軸（cross axis）.主軸的開始位置（與邊框的交叉點）叫做main start, 結束位置叫做main end ;交叉軸的開始位置叫做cross start ,結束位置叫做cross end.項目默認沿主軸排列扣猫。單個項目占據(jù)的主軸空間叫做main size,占據(jù)的交叉軸叫做cross size.
如果給一個元素設置為flex后，這個元素就會作為子元素的flex容器翘地。通過給容器設置屬性來改變里面子元素的位置申尤。
二
首先要給父元素添加display:flex；將父元素轉化為彈性盒
2.用flex-direction來改變盒子里元素的位置
row 默認在一行內(nèi)排列（從左向右）
row-reverse：反轉橫向排列（右對齊衙耕，從后往前排昧穿，最后一項排在最前面。）
column：縱向排列橙喘。
column-reverse：反轉縱向排列时鸵，從下往上排，最后一項排在最上面
3.內(nèi)容對齊（justify-content）屬性應用在彈性容器上渴杆，把彈性項沿著彈性容器的主軸線（main axis）對齊
justify-content：flex-start 默認寥枝，左對齊（圖1）
justify-content:flex-end 右對齊（圖2）
justify-content:center 居中對齊（圖3）
justify-content:space-between 兩端對齊，中間自動分配
justify-content:space-around 自動分配距離
主軸對齊方式
4.align-items（交叉軸對齊方式）
flex-start：頂端對齊
flex-end：底對齊
center：垂直居中對齊
baseline：項目內(nèi)文本的底線對齊
stretch? 默認值? ? 項目的高度自適應容器（注：子元素不能設置高）
交叉軸對齊方式
5.flex-wrap
該屬性控制flex容器是單行或者多行磁奖，同時橫軸的方向決定了新行堆疊的方向囊拜。
? nowrap：flex容器為單行。該情況下flex子項可能會溢出容器
? wrap：flex容器為多行比搭。該情況下flex子項溢出的部分會被放置到新行冠跷，子項內(nèi)部會發(fā)生斷行
? wrap-reverse：反轉 wrap 排列。
圖1（nowrap）注意如果父元素盒設置寬度會自動縮子元素容器寬度
圖2（wrap）
圖3（warp-reverse）
容器單行或者多行方式
?6身诺、align-content（行與行之間對齊方式）
當伸縮容器的側軸還有多余空間時蜜托，本屬性可以用來調(diào)整「伸縮行」在伸縮容器里的對齊方式，這與調(diào)整伸縮項目在主軸上對齊方式的 <‘?justify-content’> 屬性類似霉赡。注：本屬性在只有一行的伸縮容器上沒有效果橄务。
flex-start沒有行間距
flex-end底對齊沒有行間距
center居中沒有行間距
space-between兩端對齊，中間自動分配
space-around自動分配距離
