公告列表
公告列表
收藏
回答

新版本基础库 1.4.0 在flex布局上存在bug

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


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


回答关注问题邀请回答
收藏

3 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-07-12

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

    2017-07-12
    有用
    回复
  • Charlotte
    Charlotte
    2017-07-12

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

    2017-07-12
    有用
    回复
  • Charlotte
    Charlotte
    2017-07-12
    <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
         }
       }
     ]


    2017-07-12
    有用
    回复
请 登录 后发表内容
相关问题
相关文档