flex布局又稱為彈性布局，任何一個(gè)容器都可以指定為flex布局

聲明彈性盒子的幾種方式

就像前面說的，所有容器都可以指定為flex布局

.box{    display:flex;}

行內(nèi)元素也可以使用：

display:inline-flex;

改變彈性元素的方向

彈性盒子默認(rèn)是從左到右的方向，此時(shí)的軸是水平方向的，

flex-direction

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

同樣在wrap屬性后面加reverse，可以達(dá)到從下網(wǎng)上換行的效果

水平垂直的軸也是同理。

我們也可以通過

flex-flow

主軸與交叉軸

話不多說，直接看圖：