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;}
相关文章
相关标签/搜索