总结一下弹性盒子常用的方法，弹性盒子的功能强大，这次我做了兼容性的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一样的，基线也是一样