flex布局

1.设置主轴方向（flex-direction:）

首先对盒子设置弹性盒子布局：display: flex;

column：主轴从上到下的垂直方向

row：主轴从左到右的水平方向。默认值

reverse：颠倒，反转，把里面的盒子方向倒转

例如：flex-direction: column-reverse;

           flex-direction: row-reverse;

2.设置主轴对齐方式（justify-content:）

flex-start:默认值，从主轴起点开始对齐

 

flex-end：从主轴终点对齐，不留间隙

center：主轴上居中对齐，不留间隙

space-around：每个项目之间的距离相等

space-between：两端对齐。

3. 设置项目在交叉轴上的对齐方式(align-items：)

center：在交叉轴居中对齐。

 flex-start：项目定点与交叉轴对齐

flex-end：项目底部与交叉轴中点对齐

baseline:项目的第一行文字基线对齐

 4.设置项目是否换行(flex-wrap:)

当项目过多如：

可以添加（display: flex;）进行弹性盒子布局

然后再输入 (flex-wrap:)进行换行

        nowrap：不换行

        warp：换行

        wrap-reverse：反方向换行

如：flex-wrap: wrap;

5. 结构伪类选择器 （nth-child()）

有多个项目时，如：

        <div class="box">1</div>

        <div class="box">2</div>

        <div class="box">3</div>

        <div class="box">4</div>

        <div class="box">5</div>

        <div class="box">6</div>

        <div class="box">7</div>

        <div class="box">8</div>

        <div class="box">9</div>

我们可以使用结构伪类选择器对其中一个盒子进行修改

如：

 输入后，查看效果则变为：