flex布局详解

容器的属性

1.flex-direction 决定主轴的方向

      row      水平方向（默认）
      column   垂直方向

2.flex-wrap 超出部分是否换行

      nowrap           不换行 ，子元素会被压缩
      wrap             换行
      wrap-reverse     反向换行，下面的内容

3.flex-flow 简写

      flex-flow是flex-direction和flex-wrap的简写
      flex-flow:row nowrap

4.justify-content 容器在主轴上面的对齐方式

    flex-start       向右边对齐
    flex-end         向左边对齐
    center           居中
    space-between    左右靠边，剩下的平均分布
    space-around     子元素间距相等，两两之间的子元素间距会多一倍
    space-evenly     均等排列，两两之间的子元素间距都相等

5.align-items 容器在交叉轴上面的排列方式

    flex-start        向右边对齐
    flex-end          向左边对齐
    center            居中
    baseline          项目第一行文字的基线对齐
    stretch           如果项目未设置高度或者auto,将占满真个容器的高度

6.flex-content 元素超出一行之后的排列方式

    flex-start         向右边对齐
    flex-end           向左边对齐
    center             居中
    space-between      左右靠边，剩下的平均分布
    space-around       子元素间距相等，两两之间的子元素间距会多一倍
    space-evenly       均等排列，两两之间的子元素间距都相等

.
子元素的属性

1.flex-grow 伸展

    子元素会按照比例来分配剩余空间

2.flex-shirk 收缩

    当空间不足时，子元素会按照比例进行相应的收缩

3.order 子元素的排列顺序

    order的值越大，就排列顺序越靠后
    order的值默认为0，且order的值可以为负数

4.item-selfs 单个子元素的对齐方式

 flex-start    靠近起始位置
 flex-end      靠近结束位置
 center        居中
 baseline      项目第一行文字的基线对齐
 stretch       如果项目未设置高度或者auto,将占满真个容器的高度

推荐文章阮一飞的详细教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html