最近使用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; 加入这个即可！

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