1、现在我想做这样一个布局：
我们一般的写法使用span无法得出浮动效果
可以添加flex效果实现上述样式，他可以让span在一行显示，也可以定义大小。
2、flex的介绍：
3、注意使用flex之后，float会失效，还有vertical-align
4、最大的叫容器，子容器flex项目：
5、通过给父盒子添加属性起到改变的方法
6、常用的设置 
7、设置主轴：flex-direction
7.1 主轴设置属性：
7.2 默认的写法和效果：
7.3 使用row-reverse的效果
7.4 设置column的效果
8、想要实现左右对齐的效果
8.1 设置主轴上子元素的排列方式：
8.2 使用flex-start得出的效果：
8.3 使用flex-end得出的效果：
8.4 使用justify-content：center得出的主轴效果，都拍在中间了：
8.5 使用justify-content:space-between得出效果
8.6 两侧贴边，中间有margin的效果，flex布局也可以做，space-between就可以实现：
8.7 主轴方向设置为column的情况，设置为主轴
8.8 coluumn效果下between的效果
9、flex-wrap子元素效果的展示：使用他盒子就跑到下面了，如果不加，盒子不跑下去的话，会自动调整盒子的宽度，使用flex-wrap可以调整主轴是否换行。
如果一行显示不开，让他自动显示第二行，比如下面的案例：
9.1 设置换行还是不换行的配置属性
换行的效果
10、实现对象在主轴上居中对齐，测轴上也居中对其
10.1 align-items:设置侧轴上子元素排列顺序
10.2 实现盒子居中对齐
10.2.1 先实现主轴的居中对齐
10.2.2 实现测轴居中对齐
10.2.3 定义align-items:flex-start效果：
10.2.4 定义测轴的拉伸效果，使用拉伸效果子元素不用加高度
10.2.5 定义主轴和测轴为row,column两种情况，出现的不同效果
10.2.5.1 主轴是x轴出现的效果
10.2.5.2 主轴是y轴出现的效果
再加上align-item之后的效果
主轴居中效果
测轴居中效果
使用align-item设置测轴排列的缺点是不能设置多行，只能适应单行情况
11、适用于多行排序的情况
11.1 设置多行的排序情况
11.2 使用align-content:flex-start产生的效果，原先有距离，现在没距离贴到一起了
11.3 使用align-content:center产生的效果，可以
实现盒子整体居中对齐
11.4 使用align-content:space-between，就可以实现上沿顶着下沿的效果 
11.5 使用space-around的效果
上沿一个距离，下沿一个距离，这个风格倾向于这种风格
12、flex-flow的使用，他可以设置主轴和wrap排行，是一种集合写法
12.1 我想设置主轴为y轴，和换行就用这种写法
13、flex子项的布局方式
13.1 设置盒子占1份还是两份
13.2 一种样式写法，左边固定，右边固定，中间自适应，这种情况如何使用flex进行定义
， 13..2.1初始布局
效果
第一个盒子定义个效果
第二个盒子也定义一下
如何定义那个能自适应的盒子，就是利用flex的子项目可以分配剩余空间做到的
效果
13.3 网页应用的其他情况，这个整行布局占了5份，我把父盒子分了5份，然后子盒子占了每个占了1份
13.4 网页应用的其他情况，这个可以切成3份，每个占1份
13.5 两个占1份，一个占两份的书写
14、align-self允许有单个项目与其他项目有不一样的对齐方式
14.1 应用实例
如果我们只想要其中一个盒子能够下来：
15、设置排列顺序，与z-index不一样数值越小，越靠前
15.1 现在我想把2放到1的前面，order改成-1就可以实现了
