Flex
父容器
flex-direction
決定著主軸的方向，交叉軸是主軸逆時針旋轉(zhuǎn)得到的
row | row-reverse | column | column-reverse
row: 默認(rèn)值， 起點(diǎn)在左邊，指向右邊
row-reverse: 起點(diǎn)在右邊指向左邊
column: 起點(diǎn)在上邊，指向下面
column-reverse: 起點(diǎn)在下面指向上面
flex-wrap
在軸線上換行方式
nowrap | wrap | wrap-reverse
nowrap: 默認(rèn)值 不換行，顯示不完會截取掉
wrap: 換行，第一行在上方
wrap-reverse: 換行， 第一行在下方
flex-flow
是指flext-direction 和flex-wrap的簡稱
flex-flow: row nowrap
justify-content
定義了子容器在主軸上如何排列的
flex-start | flex-end | center | space-between | space-around
flex-start: 往主軸的指向排列
flex-end: 往主軸指向的相反方向排列
flex-center: 從主軸的中間像兩邊排列
space-bwtween: 主軸兩側(cè)排列，子容器間留有相等距離
space-around: 子容器之間以及和父容器之間都留有一定距離。
align-items
交叉軸上子容器的排列方式
flex-start | flex-end | center | baseline | stretch
flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊。
center：交叉軸的中點(diǎn)對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
align-content
多根軸線上的排列方式
flex-start | flex-end | center | space-between | space-around | stretch
子容器
order
排列順序
1，2，3....
flex-grow
定義項目的放大比例，默認(rèn)為零，就是指有剩余空間也不進(jìn)行發(fā)大，若子容器flex-grow都設(shè)為1將等分剩余空間
flex-shrink
項目的縮小比例，默認(rèn)為1，指的是空間不足時等比縮小，若設(shè)為0則不縮小
flex-basic
項目占據(jù)主軸的空間，默認(rèn)值auto
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
