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+ */
}

注意

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

参考文档