新版本基础库 1.4.0 在flex布局上存在bug
发布于 6 年前 作者 pengjing 16307 次浏览 来自 问答

1.3.0版本应用flex布局的效果：

1.4.0版本应用flex布局的效果（间距是随机的，每次刷新页面效果都不一样）：

3 回复

你好，麻烦提供一下相关的wxml结构和wxss样式。

找到原因了，还是flex本身的样式原因，不好意思麻烦您了

<view class="flexcolumn">
     <block wx:for="{{arrs}}">
       <view class="flexrow bot">
         <view class="flexone left">
           <button class="weui-btn" type="{{item.a.checked?'primary':'default'}}" bindtap="select">{{item.a.name}}</button>
         </view>
         <view class="flexone mid">
           <button class="weui-btn" type="{{item.b.checked?'primary':'default'}}" bindtap="select">{{item.b.name}}</button>
         </view>
         <view class="flexone right">
           <button class="weui-btn" type="{{item.c.checked?'primary':'default'}}" bindtap="select">{{item.c.name}}</button>
         </view>
       </view>
     </block>
   </view>
.flexrow {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-flow: row wrap;
}
 
.flexcolumn {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-flow: column wrap;
}
 
.flexone {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}
.left {
  padding-left: 10px;
}
 
.right {
  padding-right: 10px;
}
 
.mid {
  padding: 0 10px;
}
 
.bot {
  padding-bottom: 10px;
}
"arrs": [
   {
     "a": {
       "name": "河流",
       "checked": false
     },
     "b": {
       "name": "优美",
       "checked": false
     },
     "c": {
       "name": "白菜",
       "checked": false
     }
   },
   {
     "a": {
       "name": "奶奶",
       "checked": false
     },
     "b": {
       "name": "团结",
       "checked": false
     },
     "c": {
       "name": "田野",
       "checked": false
     }
   },
   {
     "a": {
       "name": "健康",
       "checked": false
     },
     "b": {
       "name": "笔",
       "checked": false
     },
     "c": {
       "name": "独立",
       "checked": false
     }
   },
   {
     "a": {
       "name": "电脑",
       "checked": false
     },
     "b": {
       "name": "扫帚",
       "checked": false
     },
     "c": {
       "name": "生姜",
       "checked": false
     }
   }
 ]
回到顶部