flex布局之设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
row	行, 水平(默认值)
column	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

flex-direction：column;

 .box {
            width: 400px;
            height: 400px;
            background-color: rebeccapurple;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

修改完毕，主轴是Y轴， 侧轴是X轴

弹性盒子换行

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

弹性盒子换行显示 : flex-wrap:

        .box {
            width: 900px;
            height: 450px;
            background-color: aqua;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            /* align-items: center; */
        }

        .box>div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box>div:nth-child(2n) {
            background-color: red;
        }

flex-wrap: wrap;

设置侧轴对齐方式

注意:

1. 此处设置侧轴多行的垂直对齐方式。 align-content（用的少）

2. 前面学过的 align-items （侧轴单行垂直对齐） （用的多）

3. align 垂直 比如 align-items 单行垂直对齐, align-content 多行垂直对齐

4. content 主轴 justify-content align-content 侧轴多行对齐

总结:flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子