html flex布局换行,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; 加入这个即可！

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