flex布局
彈性布局庆亡，當(dāng)設(shè)置為flex布局之后开瞭，子元素的float夜焦、clear壳澳、vertival-align屬性將會(huì)失效
- 采用flex布局的元素稱為容器，其子元素稱為項(xiàng)目茫经；
- 容器中存在水平的主軸及垂直的交叉軸
容器屬性
-
flex-direction：
row（默認(rèn)） | row-reverse | column | column-reverse定義項(xiàng)目在主軸的排列方向即<b>改變主軸和交叉軸的方向</b>
-
flex-wrap：
nowrap（默認(rèn)） | wrap | wrap-reverse定義項(xiàng)目在軸線上的換行方式
-
flex-flow :
row nowrap （默認(rèn)）[flex-direction flex-wrap]flex-direction和flex-wrap的縮寫
-
justify-content ：
flex-start（默認(rèn)） | flex-end | center | space-between | space-around定義了項(xiàng)目在主軸上的對(duì)齊方式(<b>具體方向根據(jù)flex-direction的設(shè)置</b>)
例如 ： 當(dāng)父元素設(shè)置flex-direction：column巷波，主軸方向?yàn)榇怪狈较颍磈ustify-content為垂直方向的對(duì)齊
space-between是項(xiàng)目?jī)蓚?cè)對(duì)齊卸伞，項(xiàng)目之間間隔相等抹镊；
space-around是項(xiàng)目?jī)蓚?cè)間隔想等，項(xiàng)目間隔是項(xiàng)目與邊框之間距離的兩倍 -
align-item ：
flex-start | flex-end | center | baseline | stretch（默認(rèn)）定義了項(xiàng)目在交叉軸上的對(duì)齊方式(<b>具體方向根據(jù)flex-direction的設(shè)置</b>)
項(xiàng)目未設(shè)置高度時(shí)荤傲，strech會(huì)占滿整個(gè)容器 -
align-content
flex-statr | flex-end | center | strecth（默認(rèn)） | space-between | space-around定義多根軸線對(duì)對(duì)齊方式
多根軸線前提下垮耳，以交叉軸為對(duì)齊標(biāo)準(zhǔn)
項(xiàng)目屬性
-
order
<integer> 數(shù)字越小，排列越靠前定義項(xiàng)目的排列順序
-
flex-grow
<number> 默認(rèn)為0定義項(xiàng)目的放大比例遂黍，flex-grow大于等于1時(shí)沒有剩余空間终佛，項(xiàng)目按比例放大，flex-grow小于1時(shí)則會(huì)剩余空間并且與項(xiàng)目為按比例展示
-
flex-shrink
<number> 默認(rèn)為1定義項(xiàng)目的縮小比例雾家，在flex容器空間不足的時(shí)候進(jìn)行比例收縮铃彰，項(xiàng)目值相同的時(shí)候?qū)?huì)等比例收縮
負(fù)值無(wú)效
-
flex-basis
<length> 默認(rèn)為auto定義在分配剩余空間之前，項(xiàng)目占據(jù)主軸的大小
-
flex
[flex-grow flex-shrink flex-basis] 后兩項(xiàng)為可選芯咧，默認(rèn)值為0牙捉，1竹揍，autoflex-grow flex-shrink flex-basis的縮寫
-
align-self
auto | flex-start | flex-end | center | baseline | stretch定義項(xiàng)目自己在交叉軸上的對(duì)齊方式，與容器的align-items屬性相同
auto為繼承容器的屬性
更多詳解：flex詳解指路
