CSS某些属性的兼容写法

原创已于 2024-12-09 12:47:21 修改 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2023-06-07 18:23:34 首次发布

文章目录

- 概要

概要

提示：常见的CSS属性兼容写法

      1、  /*display: flex;*/
        display:-WEBkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;

      2、 /*justify-content: space-between;*/
        -webkit-box-pack:justify;
        -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
        justify-content:space-between;

      3、 /*align-items: center;*/
         align-items:center;
         -webkit-align-items:center;
         box-align:center;
        -moz-box-align:center;
        -webkit-box-align:center;

      4、 /*flex-wrap: wrap;*/
        -webkit-flex-wrap:wrap;
        -webkit-box-lines:multiple;
        -moz-flex-wrap:wrap;
        flex-wrap:wrap;
        
      5、/*flex-direction: column;*/
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -moz-box-orient:vertical;
        -moz-box-direction:normal;
        flex-direction:column;
        -webkit-flex-direction:column;

      6、/*flex: 1;*/
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex-row {
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content-space-around {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items-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-wrap-nowrap {
    -webkit-box-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap-wrap {
    -webkit-box-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap-reverse {
    -webkit-box-wrap: reverse;
    -ms-flex-wrap: reverse;
    -webkit-flex-wrap: reverse;
    flex-wrap: reverse;
}
.align-content-start {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-align-conten: flex-start;
    align-content: flex-start;
}
.align-content-end {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    -webkit-align-conten: flex-end;
    align-content: flex-end;
}
.align-content-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-conten: center;
    align-content: center;
}
.align-content-between {
    -webkit-box-align: space-between;
    -ms-flex-align: space-between;
    -webkit-align-conten: space-between;
    align-content: space-between;
}
.align-content-around {
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    -webkit-align-conten: space-around;
    align-content: space-around;
}
.align-content-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-conten: stretch;
    align-content: stretch;
}