css FlexBox 弹性盒子常用方法总结

总结一下弹性盒子常用的方法，弹性盒子的功能强大，这次我做了兼容性的felxbox，虽然代码多了一点，但在项目时候可以直接复制过来用，同时在项目上线的时候，如果这时候弹性盒子出了兼容问题，那就可急了~　比较现在iPhone5的人也比较多，小米1可能也有，所以做个小小的兼容性，会更加提现用户体验哦

移动端meta标签：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

1、作兼容性转化为弹性盒子：

     display:-webkit-box;
     display: -moz-box;
     display: -ms-box;
     display: -o-box;
     display: box;
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flex;
     display: -o-flex;
     display: flex;

2、子元素分配：

-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
flex: 1;

3、以竖排版demo：

-webkit-box-direction:column;
-moz-box-direction:column;
box-direction:column;
flex-direction:column;
-webkit-flex-direction:column;

4、正常显示：

-webkit-box-direction:row;
-moz-box-direction:row;
box-direction:row;
flex-direction:row;
-webkit-flex-direction:row;

5、倒叙右对齐：

-webkit-box-direction:row-reverse;
-moz-box-direction:row-reverse;
box-direction:row-reverse;
flex-direction:row-reverse;

6、倒叙竖排列：

-webkit-flex-direction:row-reverse;
-webkit-box-direction:column-reverse;
-moz-box-direction:column-reverse;
box-direction:column-reverse;
flex-direction:column-reverse;
-webkit-flex-direction:column-reverse;

7、justify-content 用来控制元素在主轴上的对齐方式 （X轴）也是在父元素里面添加

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
有五个值：
 justify-content: flex-start;
 justify-content: center;
 justify-content: space-between;
 justify-content: space-around;
 justify-content: flex-end;

当然设置这个的前提，div的宽高肯定是直接设置值，但值可以是百分比，也可以是数值

8、align-items是负责交叉轴工作的（y轴）

也是在父元素里面添加

#container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
align-items 有5个可选值：
flex-start
flex-end
center
stretch
baseline

9、align-self 可以手动设置一个元素的对齐方式

它会针对一个 div 覆盖掉 align-items 属性，因为容器内元素属性都为 auto, 所以每个 div 都会使用父容器的 align-items 属性值
#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
/* 只有 #one 这个 div 会居中 */
 align-self:  有5个可选值：
flex-start
flex-end
center
stretch
baseline
这个主要针对需要的div进行设置，原理和align-self一样的，基线也是一样