flex布局兼容性写法
1.容器写法
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
2.其他
/*display*/
.display_flex{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.display_flex > *{
display: block;
}
.display_inline-flex{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
flex布局详细讲解}
.display_inline-flex > *{
display: block;
}
/*伸缩流⽅向*/
.flex-direction_column{
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-content_flex-end{
-webkit-box-pack: end;
-
ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content_flex-justify{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*侧轴对齐*/
.
align-items_flex-start{
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items_flex-end{
-webkit-box-align: end;
-ms-flex-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-items_center{
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-items_baseline{
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-
webkit-align-items: baseline;
align-items: baseline;
}
/*伸缩性*/
.flex_auto{
-webkit-box-flex: 1;
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
}
.flex_1{
width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/*显⽰顺序*/
.order_2{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order_3{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
*display flex*/
.flex-default {
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+ */
}
.flex-row {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* 09版 */
-webkit-box-orient: horizontal;
/* 12版 */
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/* 09版 */
-
webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 其它取值如下：
align-items    主轴原点⽅向对齐
flex-end        主轴延伸⽅向对齐
space-between  等间距排列，⾸尾不留⽩      space-around    等间距排列，⾸尾留⽩  */
/
* 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-column {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* 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;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
}
.
flex-align-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
.
flex-justify-center {
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
.flex-between {
-
webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;  justify-content: space-between;
}
.flex-wrap {
/* 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-align-around {
-webkit-box-align: space-around;
-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-1 {
-
webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。