flex布局
概念：主軸、 交叉軸
可以讓元素在主軸和交叉軸上面任意對(duì)齊，寬高占比，順序排列
在父元素上設(shè)置
display: flex
justify-content
設(shè)置元素在主軸上的對(duì)齊方式
屬性值：flex-start;主軸起點(diǎn)對(duì)齊
flex-end主軸終點(diǎn)對(duì)齊
center主軸中點(diǎn)對(duì)齊
space-bewteen把剩余的空間均分給項(xiàng)目與項(xiàng)目之間
space-around把剩余的空間均分給項(xiàng)目的兩側(cè)
align-items
設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
flex-start交叉軸起點(diǎn)對(duì)齊
flex-end交叉軸終點(diǎn)對(duì)齊
center交叉軸中心對(duì)齊
stretch項(xiàng)目高度充滿容器
baseline基線對(duì)齊
flex-direction
設(shè)置主軸方向
column從上到下
column-reverse從下到上
row代表主軸從左到右
row-reverse從右到左
flex-flow
flex-direction和flex-wrap的簡寫 默認(rèn)row nowrap
flex-wrap
如果元素過多，默認(rèn)情況不換行，需要手動(dòng)設(shè)置
wrap換行后高度均分容器高度。默認(rèn)，但是換行后，有幾行就會(huì)有幾個(gè)主軸
wrap-reverse換行后上下順序顛倒
nowrap不換行
align-content
當(dāng)有多條主軸的情況下，設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
flex-start/flex-end/center/space-between/space-around/stretch
針對(duì)多條主軸的設(shè)置方式，對(duì)單軸沒用
針對(duì)單個(gè)元素設(shè)置的
flex-grow:占用空間（可以寫占幾份）
flex-shrink:縮小比例
flex-basis設(shè)置項(xiàng)目在主軸上占據(jù)空間，可以用%
align-self單獨(dú)設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
（auto | flex-start | flex-end | center | baseline | stretch）
order設(shè)置序號(hào)，排序
