6个属性
- flex-direction属性：决定主轴的方向（即项目的排列方向）;
- flex-wrap属性：规定如果一条轴线排不下，如何换行；
- flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap；
- justify-content属性：定义了项目在主轴上的对齐方式；
- align-items属性：定义项目在交叉轴上如何对齐；
- align-content属性：定义了多根轴线的对齐方式；
主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
交叉轴： 与主轴垂直的另一方向，称为交叉轴。
flex-direction:是按照水平方向排列还是垂直方向排列【row/column】【也就是主轴方向】
flex-wrap属性：元素排满了换不换行，换行就wrap,不换行就超出浏览器宽度继续排列，no-wrap
flew-flow是综合属性，为了防止我自己混淆，先不谈这个
下面是重点
justify-content: flex-start | flex-end | center | space-between | space-around; 水平方向排列方式和对齐方式
为什么说是排列和对齐方式呢
flex-start | flex-end | center 这三个是正经的对齐方式
space-between | space-around; 则是排列方式
align-items: flex-start | flex-end | center | baseline | stretch;【单行属性】
属性值与justify-content有三个是一样的
难道是属性赘余，应该是互相补充
justify-content是主轴【默认水平】方向的排列对齐；align-items是侧轴【默认垂直】方向的垂直对齐排列
align-content，这也是侧轴的对齐
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴 线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
看图说话
