flex存在兼容性，flex 有三个版本，分别是：
display: box
display: flexbox
display: flex
old 使用的是 display: box;
tweener 使用的是 display: flexbox;
new 使用的是 display: flex;
横向排列（主轴）---具体写法：
display:box; /*（伸缩盒最老版本）*/
display:-webkit-box; /*iOS6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box; /* Firefox 19 */
display:-ms-flexbox;
display:flex; /*flex容器*/
方向：
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction:row;
水平居中（主轴是横向才生效）---具体写法：
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
垂直居中--子元素（在侧轴、纵轴上）---具体写法：
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
-o-align-items:center;
align-items:center;
横向换行 ---具体写法：
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
平分比例 ---具体写法：
-prefix-box-flex: 1; /* old spec webkit, moz */
-webkit-box-flex: 1; /* OLD -ios6-, Safari 3.1-6 */
-webkit-flex: 1; /* Chrome */
-moz-box-flex: 1; /* Firefox 19- */
-ms-flex: 1; /* IE 10 */
width:20%;
flex: 1; /* NEW, Opera 12.1, Firefox 20+ */
flex: 2;
子元素-用于改变源文档顺序显示：
-prefix-box-ordinal-group: 1; /* old spec; must be positive */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
order: 3;
居中：
box-pack:center; //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
子元素方向：
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
间距：
-webkit-box-pack:justify;
-moz-box-pack:justify;
-ms-box-pack:justify;
-moz-justify-content:space-around;
-webkit-justify-content: space-around;
justify-content: space-around;
纵列水平居中
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
