推荐参考：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将和等高对齐（备注：如果你的元素本身有高度，看不出来效果，你需要吧子容器的高度去掉，就会拉伸和父容器一致）