弹性布局----改变主轴的方式及换行和多行排列

在弹性布局中，一般默认的主轴是水平方向的轴，但是通过 “flex-direction: column; ”可以把竖直方向的轴变成主轴，具体操作 ：

/* 弹性容器 */

display: flex;

/* 改变主轴 ，把Y轴变成主轴 */

/* flex-direction: column; */

/* 侧轴居中 */

/* align-items: center; */

/* 反转排列方式 从下往上 1号盒子在下面 2号在上面*/

/* flex-direction: column-reverse; */

/* 反向排列 从右往左1号在最右边 */

flex-direction: row-reverse;

以上代码是写给父级盒子的，必须是直接的父级和子级，不能跨级！

跨行和多行排列： 在一个盒子中有多个小盒子 弹性布局会默认他们一行排列 ，通过换行“ flex-wrap: wrap;”可以使他们多行排列 多行排列后 可以通过一下属性值让他们按想要的方式排列：

          /* 弹性容器 */

            display: flex;

            /* 换行 */

            flex-wrap: wrap;

            /* 设置多行排列方式 */

            /* 多行居中 */

            /* align-content: center; */

            /* 上下贴边，中间自适应 */

            /* align-content: space-between; */

            /* 1:2排列 */

            align-content: space-around;

            /* 1: 1排列 */

            /* align-content: space-evenly; */

多行排列必须是要多行才能排列，如果是单行就没必要加了，多行排列一般要跟 换行“flex-wrap: wrap;”一起使用！