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