弹性布局
给元素添加display:flex;元素将会成为弹性布局
在默认的情况下,弹性盒子根据主轴(X轴)方向进行排列
①设置排序方向:flex-direction:row(默认)||row-reverse(从右往左)||column(竖向Y轴)||column-reverse(从下往上)
![主轴排序方式](https://img-blog.csdnimg.cn/e24c6c9e04dc4e3fb612af1264bb97cb.png#pic_center)②设置是否换行,在弹性盒子中默认是不换行的,flex-wrap:nowrap(默认不换行)||wrap(换行)||wrap-reverse(换行,从下往上换)
![默认不换行](https://img-blog.csdnimg.cn/fec15b65bc1c421f9b8e3802ac1aa113.png#pic_center) ![换行](https://img-blog.csdnimg.cn/7d0502feb7b446c48e80a32025b5a35b.png#pic_center) ![换行,第一行在下面](https://img-blog.csdnimg.cn/d84cae72923745c2b4228df2d62be39b.png#pic_center)③设置主轴对齐方式:justify-content:flex-start(左对齐)||flex-end(右对齐)||center(居中)||space-between(两端对齐,平均分配中间空隙)||space-around(两端分一半,平均分配中间空隙)
![主轴对齐方式](https://img-blog.csdnimg.cn/c5396cf5f75c4b17ae7eb060580c05b8.png#pic_center)④设置交叉轴(y轴对齐方式):align-items:center(居中)||flex-start(顶部对齐)||flex-end(底部对齐)
![交叉轴对齐方式](https://img-blog.csdnimg.cn/c699b4011319419cbdb21b2ad62fd528.png#pic_center)