弹性布局一些基本属性

弹性布局

给元素添加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（底部对齐）

交叉轴对齐方式