flex存在兼容性，flex 有三個版本棺聊，分別是：

display: box

display: flexbox

display: flex

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;

垂直居中--子元素（在側(cè)軸掸掸、縱軸上）---具體寫法：

-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;