flex版本兼容

/* 弹性布局 */
.flex{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

/* 主轴居中 */
.flex-hc {
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* 主轴两端对齐 */
.flex-zBetween {
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/* 主轴end对齐 */
.flex-zEnd {
    -webkit-box-pack: end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/* 主轴start对齐 */
.flex-zStart {
    -webkit-box-pack: start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

/* 侧轴居中 */
.flex-ac {
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

/* 侧轴start对齐 */
.flex-cStart {
    -webkit-box-align: start;
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

/* 侧轴底部对齐 */
.flex-cEnd {
    -webkit-box-align: end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

/* 侧轴文本基线对齐 */
.flex-cBaseline {
    -webkit-box-align: baseline;
    -moz-align-items: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

/* 侧轴上下对齐并铺满 */
.flex-cStretch {
    -webkit-box-align: stretch;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

/* 主轴从上到下 */
.flex-zTopBottom {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* 主轴从下到上 */
.flex-zBottomTop {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/* 主轴从左到右 */
.flex-zLeftRight {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

/* 主轴从右到左 */
.flex-zRightLeft {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}


/* 不允许子元素缩小 */
.flex-shrink {
    -webkit-box-flex: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/*各个行中间对齐*/
.flex-container {
    -webkit-align-content: center;
    align-content: center;
}

/*各个行中间对齐*/
.flex-container {
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

/*各个行中间对齐*/
.flex-container {
    -webkit-align-content: flex-end;
    align-content: flex-end;
}

/*各个行平均分布*/
.flex-container {
    -webkit-align-content: space-between;
    align-content: space-between;
}

/*各个行两端保留子元素与子元素之间间距大小的一半*/
.flex-container {
    -webkit-align-content: space-around ;
    align-content: space-around ;
}

/*父元素-横向换行 */
.flex-wrap{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
}

/*父元素-不允许横向换行 */
.flex-nowrap{
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap:nowrap;
}
/*充满父元素*/
.flex1{
    -prefix-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}