flex布局兼容总结

/* 子元素-平均分栏 */ .flex1 {     -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-flex: 1; /* OLD - Firefox 19- */     width: 20%; /* For old syntax, otherwise collapses. */     -webkit-flex: 1; /* Chrome */     -ms-flex: 1; /* IE 10 */     flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }/* 父元素-横向排列（主轴） */ .flex-h { display: box; /* OLD - Android 4.4- */     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */     display: -ms-flexbox; /* TWEENER - IE 10 */     display: -webkit-flex; /* NEW - Chrome */     display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */     /* 09版 */     -webkit-box-orient: horizontal;     /* 12版 */     -webkit-flex-direction: row;     -moz-flex-direction: row;     -ms-flex-direction: row;     -o-flex-direction: row;     flex-direction: row; }/* 父元素-横向换行 */ .flex-hw {     /* 09版 */     /*-webkit-box-lines: multiple;*/     /* 12版 */     -webkit-flex-wrap: wrap;     -moz-flex-wrap: wrap;     -ms-flex-wrap: wrap;     -o-flex-wrap: wrap;     flex-wrap: wrap;     -webkit-box-lines: multiple;     box-lines: multiple; /*single multiple*/ }/* 父元素-水平居中（主轴是横向才生效） */ .flex-hc {     /* 09版 */     -webkit-box-pack: center; /*start center end justify*/     /* 12版 */     -webkit-justify-content: center;     -moz-justify-content: center;     -ms-justify-content: center;     -o-justify-content: center;     justify-content: center;     -webkit-flex-pack: center;     flex-pack: center; /*start center end justify distribute*/     /* 其它取值如下：         align-items 主轴原点方向对齐         flex-end 主轴延伸方向对齐         space-between 等间距排列，首尾不留白         space-around 等间距排列，首尾留白     */ }/* 父元素-分布开两端对齐（主轴是横向才生效） */ .flex-hd {     /* 09版 */     -webkit-box-pack: justify; /*start center end justify*/     /* 12版 */     -webkit-justify-content: space-around;     -moz-justify-content: space-around;     -ms-justify-content: space-around;     -o-justify-content: space-around;     justify-content: space-around;     -webkit-flex-pack: distribute;     flex-pack: distribute; /*start center end justify distribute*/     /* 其它取值如下：         flex-start | 主轴原点方向对齐         flex-end 主轴延伸方向对齐         space-between 等间距排列，首尾不留白         space-around 等间距排列，首尾留白     */ }/* 父元素-纵向排列（主轴） */ .flex-v {     display: box; /* OLD - Android 4.4- */     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */     display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */     display: -ms-flexbox; /* TWEENER - IE 10 */     display: -webkit-flex; /* NEW - Chrome */     display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */     /* 09版 */     -webkit-box-orient: vertical;     /* 12版 */     -webkit-flex-direction: column;     -moz-flex-direction: column;     -ms-flex-direction: column;     -o-flex-direction: column;     flex-direction: column; }/* 父元素-纵向换行 */ .flex-vw {     /* 09版 */     /*-webkit-box-lines: multiple;*/     /* 12版 */     -webkit-flex-wrap: wrap;     -moz-flex-wrap: wrap;     -ms-flex-wrap: wrap;     -o-flex-wrap: wrap; flex-wrap: wrap; }/* 父元素-竖直居中（主轴是横向才生效） */ .flex-vc {     /* 09版 */     -webkit-box-align: center;     /* 12版 */     -webkit-align-items: center;     -moz-align-items: center;     -ms-align-items: center;     -o-align-items: center;     align-items: center;     /*其他值如下         flex-start 交叉轴的起点对齐         flex-end 交叉轴的终点对齐         center 交叉轴的中点对齐         baseline 项目的第一行文字的基线对齐         stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度     */ }/*多行垂直居中*/ /*这个只有伸缩项目有多行时才生效，这种情况只有伸缩容器设置了flex-wrap为wrap时，并且没有足够的空间把伸缩项目放在同一行中。这个将对每一行起作用而不是每一个伸缩项目*/ .flex-dvc{     -webkit-align-content: center;     -moz-align-content: center;     -ms-align-content: center;     -o-align-content: center;     align-content: center;     /*其他值如：        flex-start ｜ flex-end ｜ space-between ｜ space-around ｜ stretch    */     -webkit-flex-line-pack: center;     flex-line-pack: center;     /*其他值如：        start ｜ end ｜ justify｜ distribute｜ stretch    */ }/*多行垂值平均分布*/ .flex-dvd{     -webkit-align-content: space-around;     -moz-align-content: space-around;     -ms-align-content: space-around;     -o-align-content: space-around;     align-content: space-around;     /*其他值如：        flex-start ｜ flex-end ｜ space-between ｜ space-around ｜ stretch        */     -webkit-flex-line-pack: distribute;     flex-line-pack: distribute;     /*其他值如：        start ｜ end ｜ justify ｜ distribute ｜ stretch    */ }/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */ .flex-1 {     -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */     -ms-flex-order: 1; /* TWEENER - IE 10 */     -webkit-order: 1; /* NEW - Chrome */     order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */ .flex-2 {     -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */     -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */     -ms-flex-order: 2; /* TWEENER - IE 10 */     -webkit-order: 2; /* NEW - Chrome */     order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

注意

当在低版本手机使用 box-pack: justify; 时，子节点应该是 块级元素（行内元素 应设：display：block; 不要设为：display：inline-block；）

参考文档