自定义简易常用Flex布局兼容写法样式类

• 父级设置flex

  .flex{
      display:-webkit-box;
      display:-moz-box;
      display:-webkit-flex;
      display:-moz-flex;
      display:-ms-flexbox;
      display:flex
  }
  

• 主轴排列方向，X轴和Y轴

  .flex-x{
      -webkit-box-direction: normal;
      -webkit-box-orient:horizontal;
      -moz-flex-direction:row;
      -webkit-flex-direction:row;
      flex-direction:row
  }
  .flex-y{
      -webkit-box-direction:normal;
      -webkit-box-orient:vertical;
      -moz-flex-direction:column;
      -webkit-flex-direction:column;
      flex-direction:column
  }
  

• 确认主轴情况下的对齐方式
  flex-start（默认值）：左对齐
  flex-end：右对齐
  center： 居中
  space-between：两端对齐，项目之间的间隔都相等
  space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

  .flex-x-start{
      -webkit-box-pack:start;
      -moz-justify-content:flex-start;
      -webkit-justify-content:flex-start;
      justify-content:flex-start
  }
  .flex-x-center{
      -webkit-box-pack:center;
      -moz-justify-content:center;
      -webkit-justify-content:center;
      justify-content:center
  }
  .flex-x-end{
      -webkit-box-pack:end;
      -moz-justify-content:flex-end;
      -webkit-justify-content:flex-end;
      justify-content:flex-end
  }
  .flex-x-between{
      -webkit-box-pack:justify;
      -moz-justify-content:space-between;
      -webkit-justify-content:space-between;
      justify-content:space-between
  }
  .flex-x-around{
      -webkit-box-pack:around;
      -moz-justify-content:space-around;
      -webkit-justify-content:space-around;
      justify-content:space-around
  }
  

• 设置交叉轴上对齐方式，且在只有一根轴线情况下，即不设置换行
  flex-start：交叉轴的起点对齐
  flex-end：交叉轴的终点对齐
  center：交叉轴的中点对齐

  .flex-y-start{
      -webkit-box-align:start;
      -moz-align-items:flex-start;
      -webkit-align-items:flex-start;
      align-items:flex-start
  }
  .flex-y-center{
      -webkit-box-align:center;
      -moz-align-items:center;
      -webkit-align-items:center;
      align-items:center
  }
  .flex-y-end{
      -webkit-box-align:end;
      -moz-align-items:flex-end;
      -webkit-align-items:flex-end;
      align-items:flex-end
   }
  

• 换行

  flex-wrap: nowrap | wrap | wrap-reverse  第一行在下方;
  //兼容写法
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -o-flex-wrap: wrap;
   flex-wrap:wrap;
  

• 多轴情况下的排列方式，即设置换行
  flex-start：与交叉轴的起点对齐。
  flex-end：与交叉轴的终点对齐。
  center：与交叉轴的中点对齐。
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  stretch（默认值）：轴线占满整个交叉轴。

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  //兼容写法
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content:  flex-start;
  

• 所有代码，复制即可，未包含多轴情况

  .flex{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex}
  .flex-x{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-moz-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}
  .flex-y{-webkit-box-direction:normal;-webkit-box-orient:vertical;-moz-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
  .flex-x-start{-webkit-box-pack:start;-moz-justify-content:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start}
  .flex-x-center{-webkit-box-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}
  .flex-x-end{-webkit-box-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}
  .flex-x-between{-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between}
  .flex-x-around{-webkit-box-pack:around;-moz-justify-content:space-around;-webkit-justify-content:space-around;justify-content:space-around}
  .flex-y-start{-webkit-box-align:start;-moz-align-items:flex-start;-webkit-align-items:flex-start;align-items:flex-start}
  .flex-y-center{-webkit-box-align:center;-moz-align-items:center;-webkit-align-items:center;align-items:center}
  .flex-y-end{-webkit-box-align:end;-moz-align-items:flex-end;-webkit-align-items:flex-end;align-items:flex-end}