flex布局兼容性写法

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