CSS旧版flex及兼容_html/css_WEB-ITnose

× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向 [4]伸缩流换行 [5]主轴对齐 [6]伸缩性 [7]显示顺序 [8]flex兼容

前面的话

　　[注意]该值支持小数，但不能为负数

显示顺序

　　旧版本flex的显示顺序是以1为默认值的正整数，而新版本flex的显示顺序是以0为默认值的自然数。所以在设置显示顺序时，跳过1，从2开始设置

flex兼容

　　以下是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;} 

查看更多关于CSS旧版flex及兼容_html/css_WEB-ITnose的详细内容...