flex布局兼容IE10
下文内容摘自:https://blog.csdn.net/mazhili1991/article/details/104476445/
在IE10浏览器中,使用flex布局的常用兼容性代码:
/*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; }