对flex布局的总结

flex布局就是给父级盒子设置display：flex，来改变子元素的排列方式。

flex布局中父级元素可以设置的属性

1.flex-directory

用来设置主轴的方向，然后子元素会跟着这个方向来排列，默认值是row行，也可以是column列。

2.justify-content

用来设置主轴上子元素的排列方式，默认值是flex-start，也可以是flex-end，这两个属性就是设置靠着哪边来排。
当值为center时，子元素会居中。
当值为space-around时，会完完全全的平均分配空间。（在主轴是row时每个盒子的margin-left和margin-right一样）
当值为space-between时，会先左右（贴着主轴）贴着两边，然后剩下的均分【最常用】。

3.flex-wrap

用来设置子元素是否换行，默认值是nowrap不换行，如果元素很多则会压缩演示，可以设置为wrap，这时会换行显示。

4.align-items设置侧轴上子元素的排列方式【子元素为单行】

默认值为flex-start，也可以为flex-end，设置靠着哪边来排，
center最重要，让子元素在侧轴上居中。

5.align-content设置侧轴上子元素的排列方式【子元素为多行】

默认值是flex-start，也可以是flex-end，子元素会依次靠着头或尾排列。
当值为center时，盒子整体居中。
当值为space-around时，会完完全全的平均分配空间。
当值为space-between时，会先在上下（贴着侧轴）贴着两边，然后剩下的均分。

6.flex-flow

合写flex-directory和flex-wrap。

flex布局中子元素可以设置的属性

1.flex属性

用来设置子元素所占的剩余空间的多少。

这里有很多很多想说的，但是不知道该怎么描述，差不多就是你设置很多flex的值，最后这些值的和就是剩余空间的所要分的份数，然后每个flex的值就占对应的份数（看你们能不能理解qaq，没法表达出来qaq）

2.align-self

设置自己在侧轴上的排列

3.order

设置子元素排列的先后顺序。默认是0 1 2 3…