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

聲明彈性盒子的幾種方式

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

.box{    display:flex;}

行內元素也可以使用：

display:inline-flex;

改變彈性元素的方向

彈性盒子默認是從左到右的方向，此時的軸是水平方向的，

flex-direction

row

.box{    display:flex;}

可以通過修改

flex-direction

屬性來改變排列方向，也就是把軸變為垂直方向

.box{    display:flex;    flex-deriction:column;}

還可以反轉，把屬性修改為

column-reverse

row-reverse

同理

控制彈性盒子溢出問題

如果盒子里面的元素特別多，水平寬度或者高度不夠時，默認的情況是會縮小盒內元素寬度

我們在這里可以通過換行來解決

在盒子加上

flex-wrap

同樣在wrap屬性后面加reverse，可以達到從下網上換行的效果

水平垂直的軸也是同理。

我們也可以通過

flex-flow

主軸與交叉軸

話不多說，直接看圖：