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