flex——弹性布局的简单记录

  display: flex; //让某个元素弹性布局
  
  //容器属性
  flex-direction: row;//决定主轴方向，项目排列方向
                  row:主轴为水平方向，起点在左端。
                  row-reverse:主轴为水平方向，起点在右端。
                  column:主轴为垂直方向，起点在上沿。
                  column-reverse:主轴为垂直方向，起点在下沿。
  justify-content:主轴方向上的对齐
                  flex-start:左对齐，默认
                  flex-end:右对齐
                  center:居中
                  space-betweem:两端对齐，项目之间的间隔都相等。
                  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。              
    此对齐会受flex-direction的影响，即主轴倒是是水平还是垂直来源于flex-direction的值。

  align-items:交叉轴上的对齐
              flex-start:交叉轴的起点对齐
              flex-end:交叉轴的终点对齐
              center:交叉轴的中点对齐
              baseline: 项目的第一行文字的基线对齐。
              stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
    此对齐会受flex-direction的影响，即主轴倒是是水平还是垂直来源于flex-direction的值。

  flex-wrap:轴线上的换行
            nowrap（默认）：不换行
            wrap：换行，第一行在上方
            wrap-reverse：换行，第一行在下方

  flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  
  //项目属性
  order:项目的排列顺序，数值越小，排列越靠前。默认为0

  flex-grow:项目的放大比例，默认为0(即使有剩余空间 也不会放大)

  flex-shrink:项目缩小比例，默认为1（当空间不足时，所有项目将等比例缩小）
              若有一个项目为0，则改项目不缩小，其他项目缩小

  flex-basis:项目占据主轴的预留空间，即分配前就具有的空间，默认为auto(项目大小)。
              给定值以后，改项目的空间=给定的值+分配的值

  flex:flex-grow, flex-shrink 和 flex-basis的简写
      none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  当flex:auto; => flex:1 1 auto
  当flex:none; => flex:0 0 auto
  当flex:1(非负数); => flex:1 1 0%
  当flex:0%(百分比); => flex:1 1 0%
  当flex:20px(长度单位); => flex:1 1 20px;
  当flex:2 3; => flex:2 3 0%;
  当flex:2 20px; =>flex:2 1 20px;

  align-self:单个项目对齐方式,可覆盖align-items属性。默认值为auto
            auto:继承父元素align-items/stretch
            flex-start:交叉轴的起点对齐
            flex-end:交叉轴的终点对齐
            center:交叉轴的中点对齐
            baseline: 项目的第一行文字的基线对齐

关于兼容：

安卓平台的UC和微信：要加-webkit-

        display:flex;
        display:-webkit-flex

flex:1；   -webkit-，  -moz-， 原生

        -webkit-box-flex:1
        -moz-box-flex:1
        box-flex:1

同理的有：

        align-item:center;
        flex-direction:column;
        box-orient:vertical;

参考文档：

  http://www.runoob.com/w3cnote/flex-grammar.html
  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties