flex布局下换行兼容问题

最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题

尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子





.flex-block() {
    display: box;              /* OLD - Android 4.4- */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;   
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-wrap(@wrap: nowrap) {//换行nowrap | wrap | wrap-reverse;换行在最下方开始

     -webkit-box-lines: multiple;
    -webkit-flex-wrap: @wrap;
    -moz-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
     -o-flex-wrap: @wrap;
    flex-wrap: @wrap;
}

.flex(@args: none) {
    -moz-box-flex: @args; /* Firefox */
-webkit-box-flex: @args; /* Safari 和 Chrome */
box-flex: @args;
    -webkit-flex: @args; 
    -moz-flex: @args;
    -ms-flex: @args;
    -webkit-flex: @args;
    flex: @args;
}

其实主要问题在于,有的手机浏览器不换行,比如腾讯内置的默认浏览器

解决方法:

flex 里面的层设置下最小宽度,假如我们设置比列就失去了flex布局自动变化的含义了!  我采用的是直接强制最小的宽度!

则min-width:120px; 加入这个即可!


看下面是横屏和竖屏的自动变化



写的好!

微信扫一扫赏大洋