每當(dāng)我們?nèi)ミM行前端頁面布局時都會用到float录粱、position纵顾、margin等一些屬性串慰，這些屬性用起來略顯麻煩，并且瀏覽器去進行渲染時會大大消耗性能
所以今天我們來談?wù)勛钚碌?flex布局笙各，也叫彈性布局钉答！
需要注意的是任何容器都可以指定為flex布局，但是在flex布局中float杈抢、clear数尿、vertical-align都會失效。
主軸方向
flex容器分為x軸與y軸惶楼，x軸正方向默認(rèn)從左至右右蹦，y軸正方向默認(rèn)從上到下。
定義一個容器為彈性布局display:flex;主軸默認(rèn)方向為左到右鲫懒；
如果我們想去改變flex的默認(rèn)方向嫩实，就需要用到flex-direction屬性
flex-direction有四個屬性值，分別是row窥岩、row-reverse甲献、column、column-reverse颂翼，分別為從左到右晃洒、從右到左、從上到下朦乏、從下到上球及！
主軸方向的對齊方式
justify-content:flex-start則主軸為左對齊
justify-content:flex-end 則主軸為右對齊
justify-content:center 則主軸為居中
justify-content:space-between則每個子項目之間等距離，前提是有剩余空間
justify-content:space-around則每個子項目會平分剩余空間呻疹，子項目與父元素邊界處也會存在距離
縱向單行對齊方式吃引！
align-item:flex-start縱向從上到下
align-item:flex-end縱向從下到上
align-item:center縱向居中對齊
align-item:baseline以基線對齊
align-item:strech這是默認(rèn)方式
子項目換行
flex-wrap:wrap超出父元素會換行
flex-wrap:wrap-reverse反向換行
flex-wrap:no wrap這是默認(rèn)方式,不換行
縱向多行對齊方式！
align-content:flex-start上對齊
align-content:flex-end下對齊
align-content:center上下居中
align-content:space-between
align-content:space-around
以上均是添加到父元素身上的屬性####子項目的一些屬性
order:0,定義子項目的排序位置刽锤，數(shù)值越小越靠前镊尺，默認(rèn)為0
flex-grow:0;定義子項目的放大比例，默認(rèn)為0不放大
flex-shrink:1;定義子項目的縮小比例并思，默認(rèn)為1庐氮，空間不足將等比縮小，0則不縮小宋彼，負值無效
flex-basis:1;定義子項目占據(jù)空間弄砍，默認(rèn)為auto仙畦，可以設(shè)置百分比，也可以是固定值
以上三種屬性可以簡寫音婶，比如flex：1,1,1順序如上
