flex布局又稱為彈性布局,任何一個(gè)容器都可以指定為flex布局
聲明彈性盒子的幾種方式
就像前面說的,所有容器都可以指定為flex布局
.box{ display:flex;}
行內(nèi)元素也可以使用:
display:inline-flex;
改變彈性元素的方向
彈性盒子默認(rèn)是從左到右的方向,此時(shí)的軸是水平方向的,
flex-direction 默認(rèn)屬性為 row.box{ display:flex;}
可以通過修改
flex-direction屬性來改變排列方向,也就是把軸變?yōu)榇怪狈较?/p>
.box{ display:flex; flex-deriction:column;}
還可以反轉(zhuǎn),把屬性修改為
column-reverse , row-reverse同理
控制彈性盒子溢出問題
如果盒子里面的元素特別多,水平寬度或者高度不夠時(shí),默認(rèn)的情況是會(huì)縮小盒內(nèi)元素寬度

我們在這里可以通過換行來解決
在盒子加上
flex-wrap ,可以實(shí)現(xiàn)溢出部分往下?lián)Q行
同樣在wrap屬性后面加reverse,可以達(dá)到從下網(wǎng)上換行的效果

水平垂直的軸也是同理。
我們也可以通過
flex-flow 同時(shí)設(shè)置軸的方向和是否換行
主軸與交叉軸
話不多說,直接看圖:
新聞熱點(diǎn)
疑難解答