flex布局

flex布局,估计是前端或重构人员又爱又恨的技术。爱的是它实现布局的简单灵活,恨的是它的兼容性。好吧,如果产品的受众不是老古懂,话事人也没有处理女座情结,还是大胆去用吧。特别是移动端,像taobao 移动版,微信(WeUI) 这些大头都在广泛使用啦。

至于兼容性,收集并实践如下方式都不错。Sass代码如下:

.com-flex{
   @include display-flex;

   .flex-item{
      display:block; //这个修正某些旧版浏览器的inline元素
      @include flex;
   }
}

@mixin display-flex{
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}
@mixin flex($n:1){
   -webkit-box-flex: $n;
   -webkit-flex: $n;
   -ms-flex: $n;
   flex: $n;
}

发表评论