flex彈性盒模型布局
使用傳統(tǒng)的float position布局很繁瑣，復(fù)雜的布局很難實現(xiàn)概漱，flex布局現(xiàn)在很多的瀏覽器上都已支持丑慎，移動端布局十分方便。
1.png
設(shè)置彈性盒子
- 當(dāng)確定某些元素需要彈性盒子模型布局瓤摧，讓他的父元素（容器）設(shè)置成
display:flex - 如果設(shè)置行類元素為flexbox 設(shè)置
display:inline-flex
flex模型
- 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行竿裂、縱向的列）。該軸的開始和結(jié)束被稱為 main start 和 main end姻灶。
- 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸铛绰。該軸的開始和結(jié)束被稱為 cross start 和 cross end。
- 設(shè)置了
display: flex的父元素（在本例中是 ``）被稱之為 flex 容器（flex container）产喉。 -
主軸方向
flex-direction設(shè)置主軸方向column,row,column-reserve,row-reserve
換行
- 當(dāng)在布局時定寬或者定高捂掰，但內(nèi)容溢出，會使布局被破壞這個時候需要換行
flex-wrap來換行
flex的動態(tài)尺寸
當(dāng)flex如上設(shè)置曾沈，每個flexBox都是平分主軸上可用空間的大小通過設(shè)置flex:1 flex:2就會按比例計算每個占主軸的比例 flex:1 200px來設(shè)置flexBox的最小值这嚣，表示每flexBox元素先分配200px大小，剩余空間按照比例來分配
水平和垂直對齊
-
align-items控制flexbox在交叉軸上的位置塞俱。默認stretch會在交叉軸上拉升姐帚，填滿交叉軸方向。center會保持原來的大小障涯，在交叉軸上居中罐旗，也可以設(shè)置flex-start,flex-end來設(shè)置在交叉軸位置膳汪。 - 可以在flexBoxs上設(shè)置
align-self上覆蓋align-items的值。 -
justify-content控制flex項在主軸上的位置flex-start移到主軸開始處九秀，flex-end移到主軸結(jié)束處遗嗽。center居中,space-around均勻分布在主軸,space-between和space-aroud相似，但是左右兩側(cè)不會有空間
flex項排序
在容器內(nèi)的flexbox設(shè)置 order默認值為0越大越靠后鼓蜒，可以設(shè)置-1來排在前面痹换。
flex嵌套
彈性盒子也能創(chuàng)建一些頗為復(fù)雜的布局。設(shè)置一個元素為flex項目都弹，那么他同樣成為一個 flex 容器娇豫，它的孩子(直接子節(jié)點)也表現(xiàn)為 flexible box 。
