推荐参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
父容器
justify-content 决定item在主轴（水平方向）上的对齐方式
1. 位置排列：
flex-end:右对齐
flex-start:左对齐
center：居中对齐
2.分布排列：
space-around:沿轴线均匀分布
space-between：两端对齐
align-items 决定item 在交叉轴（垂直方向）的对齐方式
3.位置排列
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
基线排列
baseline:item的第一行文字的底部对齐（备注：给第一个元素添加padding-top可以看出效果）
拉伸排列
stretch:当item未设置高度时，item将和等高对齐（备注：如果你的元素本身有高度，看不出来效果，你需要吧子容器的高度去掉，就会拉伸和父容器一致）
子容器
在主轴上如何伸缩：flex(备注：flex是flex-grow|flex-shink|flex-basis的缩写)
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间 也不放大
flex-shink属性定义了项目的缩小比例，默认为1，即如果空间不足，将该项目缩小。注意：数字是往大了调，负值对该属性无效。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间，他的默认值是auto，即项目原来的大小。
默认是0 1 auto，后两个属性可选。
单独设置子容器如何沿交叉轴排列：align-self（备注：align-self允许单个项目有与其他项目不一样的对齐方式）
1.位置排列
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
2.基线排列
baseline:item的第一行文字的底部对齐（备注：给第一个元素添加padding-top可以看出效果）
3.拉伸排列
stretch:当item未设置高度时，item将和等高对齐（备注：如果你的元素本身有高度，看不出来效果，你需要吧子容器的高度去掉，就会拉伸和父容器一致）
