怪異盒模型：box-sizing

? ? content-box：標(biāo)準(zhǔn)盒模型

? ? border-box：怪異盒模型---原始設(shè)置的css寬高不變，向內(nèi)擠壓內(nèi)容區(qū)域

? ? ? ? ? ? ? ? ? ? ? ? ? ? 不會(huì)在受到border padding的影響

彈性盒-新的布局方式 適合移動(dòng)端布局

? ? 父元素加上：display：flex-彈性盒

? ? ? ? ? ? ? 子元素默認(rèn)橫向排列

? ? ? ? ? ? ? 子元素是行內(nèi)元素直接變成塊元素進(jìn)行css樣式的設(shè)置

? ? ? ? ? ? ? 子元素只有一個(gè)元素的時(shí)候加 margin：auto 子元素自動(dòng)水平垂直居中

修改主軸方向：

?主軸：默認(rèn)橫向排列 ? ?主軸可通過(guò)屬性改為縱向排列此時(shí)主軸縱向排列側(cè)軸為橫向

?側(cè)軸：縱向排列

?修改主軸方向 flex-direction：

? ? ? ? ? ? ? ? ? ?column-縱向排列 ? ? ? ? ? ? ? ? 豎直方向

? ? ? ? ? ? ? ? ? ?column-reverse-縱向的反向排列

? ? ? ? ? ? ? ? ? ?row-橫向排列 ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?row-reverse-橫向的反向排列 ?

主軸側(cè)軸對(duì)齊方式：justify-content：（切記主側(cè)軸問(wèn)題）

? ? ? ? ? ? ? ?flex-start--默認(rèn)

? ? ? ? ? ? ? ?flex-end--主軸方向靠右邊對(duì)齊

? ? ? ? ? ? ? ?center--中間對(duì)齊

? ? ? ? ? ? ? ?space-between--兩端對(duì)齊

? ? ? ? ? ? ? ?space-around--距離環(huán)繞

調(diào)整側(cè)軸的屬性：align-items：

? ? ? ? ? ? ? flex-start--默認(rèn)

? ? ? ? ? ? ? flex-end--側(cè)軸方向靠底

? ? ? ? ? ? ? center--側(cè)軸方向居中（如果同時(shí)設(shè)置，這時(shí)候子元素水平垂直居中）

折行與行間距：切記主側(cè)軸問(wèn)題

? ? 折行：flex-wrap：wrap/nowrap-不折行

? ? 行間距：align-content：

? ? ? ? ? ?flex-start--默認(rèn)挨著上邊界緊密相貼

? ? ? ? ? ?flex-end--挨著下邊界所有子元素緊密相貼

? ? ? ? ? ?center--在中間所有子元素緊密相貼（貼左邊開(kāi)始）

? ? ? ? ? ?space-between--貼著兩端的等距離排列

? ? ? ? ? ?space-around--等距離環(huán)繞，在一行能盛下的情況下等間距排列

項(xiàng)目對(duì)齊方式：（父元素里面的子元素設(shè)置）大盒子為容器 里面的為項(xiàng)目--注意主側(cè)軸調(diào)換

? ? align-self：

? ? ? ? ?flex-start--默認(rèn)

? ? ? ? ?flex-end--去底部

? ? ? ? ?flex-center--中間

? ? ? ? ?flex-baseline--

? ? ? ? ?flex-stretch--拉伸 不設(shè)置高度后會(huì)占滿(mǎn)整個(gè)屏幕

項(xiàng)目調(diào)整順序：order--順序值越大越往后面跑 ? 默認(rèn)為0 可以設(shè)為負(fù)數(shù)

項(xiàng)目剩余寬高：flex：1--方便三欄布局 設(shè)置哪個(gè)哪個(gè)就占滿(mǎn)剩余空間

橫向滾動(dòng)：flex-shrink：0（不受擠壓）/1（擠壓） ?配合 overflow：auto使用