关于flex兼容问题

##vue-关于flex兼容问题

在ios低版本（iphone4/iphone5s/iphone6）上遇到了flex，flex-wrap，justify-content等弹性盒子样式不兼容的问题。需要单独加一下兼容才起作用，需要给样式前面加上-webkit-才行。

• Android
  • 2.3 开始就支持旧版本 display:-webkit-box;
  • 4.4 开始支持标准版本 display: flex;
• IOS
  • 6.1 开始支持旧版本 display:-webkit-box;
  • 7.1 开始支持标准版本display: flex;
• PC
  • ie10开始支持，但是IE10的是-ms形式的。

* display:flex;
//兼容处理之后 
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+ */
* flex:1;
//兼容处理之后 
-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-6 */
-moz-box-flex: 1;           /* OLD - Firefox 19- */

关于display：flex/ box？

• 区别如下：
  • display：flex主要让子容器针对父容器的宽度按一定规则进行划分
  • display：box主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式
  • display: box; 是盒子模型刚出来的时候的语法
  • display: flex; 是2012年后最新的盒子模型语法标准。
  • 也就是说，如果要兼容2012年之前的浏览器版本需要使用box， 反之使用flex即可。
  • box语法2012年以后已经被抛弃。

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦