深层次了解CSS系列之flex适配

2021-01-20 19:09 jianzhan

序言

我写网页页面的情况下用到过许多的flex合理布局，感觉十分功能强大。下面附上1篇非常好的flex合理布局详细介绍的文章内容。

Flex 合理布局实例教程想掌握的能够自身去看看这篇博文，或自身百度搜索，这里先部多做详细介绍，大家关键来讲1说flex合理布局的适配性难题。

why?

大伙儿将会想问了，flex合理布局为何会存在适配性难题啊？

之因此存在适配性难题，是由于技术性在持续的升级，一些旧的访问器只适用旧英语的语法的撰写方法，因此就出現所谓的适配性难题。

what？

那末新旧版本号是甚么？

flex合理布局分成旧版本号dispaly: box;，过渡版本号dispaly: flex box;，和如今的规范版本号display: flex;。因此假如你只是写新版本号的英语的语法方式，是毫无疑问存在适配性难题的。

Android

2.3 刚开始就适用旧版本号 display:-webkit-box;

4.4 刚开始适用规范版本号 display: flex;

IOS

6.1 刚开始适用旧版本号 display:-webkit-box;

7.1 刚开始适用规范版本号display: flex;

ie10刚开始适用，可是IE10的是-ms方式的。

下面是各个访问器的适用状况

how？

因此大家该怎样开展适配性的写法呢？

盒子的适配性写法

.box{
    display: -webkit-box;  /* 老版本号英语的语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本号英语的语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混和版本号英语的语法: IE 10 */
    display: -webkit-flex; /* 新版本号英语的语法: Chrome 21+ */
    display: flex;         /* 新版本号英语的语法: Opera 12.1, Firefox 22+ */
}

子元素的适配性写法

.flex1 {  
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1⑹ */  
    -moz-box-flex: 1;     /* OLD - Firefox 19- */              
    -webkit-flex: 1;      /* Chrome */  
    -ms-flex: 1           /* IE 10 */  
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

这类适配写法不1定见效的。特别是在底版本号安卓系统系统软件中。由于甚么呢?由于全部全是向下适配的，因此写法的次序1定要写好了才起功效。便是把旧英语的语法写在底下，某些兼容问题的挪动设定才会鉴别，哪些是旧的英语的语法，你懂的。那些带box的1定要写在最下面便可。

因此上面的适配写法应当是这样的才对:

.box{

    display: -webkit-flex;  /* 新版本号英语的语法: Chrome 21+ */
    display: flex;          /* 新版本号英语的语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本号英语的语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本号英语的语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混和版本号英语的语法: IE 10 */   

 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1⑹ */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

总结

这样来试试吧，确保不容易再出現返工改动的难题。以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，假如有疑惑大伙儿能够留言沟通交流。

深层次了解CSS系列之flex适配

为您推荐