flex布局

设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
属性值 作用
row 行, 水平(默认值)
column 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上
例如:flex-direction：column;
修改完毕，主轴是Y轴， 侧轴是X轴。

弹性盒子换行
特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。
弹性盒子换行显示 : flex-wrap:
语法：flex-wrap: wrap;

设置侧轴对齐方式
注意:
此处设置侧轴多行的垂直对齐方式。 align-content
和前面学过的 align-items （侧轴单行垂直对齐）
align-content：center；
属性值 作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

弹性盒子换行
特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。
flex-wrap: wrap;

设置主轴方向
flex-direction: column;
让我们的主轴设置为垂直。 默认的是 row 水平的。