转：flex布局在ios8上的兼容性问题

原文地址： https://blog.csdn.net/hicoldcat/article/details/78134893

 

最近在做项目时，使用到了flex布局。其他ios版本都还好，唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现，safari使用的是webkit内核，在ios8上需要单独加一下兼容才起作用。

.flex-row {
  display       : -webkit-box;
  display       : -ms-flexbox;
  display       : flex;
  display       : -webkit-flex;  //兼容问题
  -ms-flex-wrap : wrap;
  flex-wrap     : wrap;
  
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

ios8对flex不兼容问题

一般代码

.ec-list{

    display: flex;

}

.ec-item{

    flex:1;

}

兼容性代码

.ec-list {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

}

 

.ec-item {

  -webkit-box-flex: 1;

  -webkit-flex: 1;

  flex: 1;

}

 

 

# 发现在iphone6 系统ios8的版本上 display: -webkit-flex还是没有效果，

突然发现使用float样式完成了项目中的效果