1.设置主轴方向

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

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

 语法:

flex-direction: column;

2.如何去算是几倍图

精灵图的宽度/装精灵盒子的宽度=倍数

3.弹性盒子换行

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

弹性盒子换行显示：flex-wrap；

语法：

flex-wrap: wrap;

4.设置侧轴对齐方式

注意：

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

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

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

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

align-content：center；

 5.flex总结梳理

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

5.1.主轴排列方式（重点）

默认的水平，但是可以转换。

1.如果给父盒子添加 display：flex；

2.justif-content：center；

3.justify-content：space-between；左右两侧无缝隙 

 4.justify-content：space-around；两倍关系

5.justify-content：space-evenly；缝隙均等

 5.2.侧轴对其方式-单行对齐（重点）

1.默认的对齐方式  stretch 拉伸

2.顶对齐  flex-start

 3.align-items：center；（重点）

 5.3.侧轴对齐方式-多行

1.align-content：space-between；

 2.align-content: space-around;

 3.align-content: space-evenly;

 4.align-content: center;

 5.4.弹性盒子换行（重点）

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

flex-wrap: wrap;

5.5.设置主轴方向（重点）

flex-direction: column;

让我们的主轴设置为垂直。默认的是row水平的。