【微信小程序】flex布局一旦遇上for循环就失效

Question

代码如下：

wxml部分：

<view class='skill' hidden='{{currentNavtab == "3" ? "" : true}}'>
    <view class='box' wx:for='{{skill}}'>
      <view class='skill-item'>
        <image class='icon' src='{{item.icon}}'></image>
        <view class='name'>{{item.name}}</view>
      </view>
    </view>
  </view>

wxss部分：

.skill .box {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
}
.skill .skill-item {
  box-sizing: border-box;
  flex: 0 0 33.3333333333333%;
  font-size: 24rpx;
  color: #535353;
  background-color: white;
  padding: 40rpx;
  text-align: center;
}
.skill .icon {
  height: 50rpx;
  width: 50rpx;
  margin: 15rpx;
}
.skill .name {
  margin: 0 auto;
}

js部分：

skill: [
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
    ]

目前结果呈现：

完全不明白为什么，明明flex-direction已经设置了是row了，还是像column一样竖着拍下来了。

没有进一步学习过vue，所以不知道各位懂vue的知不知道这问题是为什么。

谢谢各位。

---

补充内容：

我的目的是希望能够布局三个方块一行排列下去的效果。

Answer 1

第一，你循环放错位置了！
只改布局，不改样式

    <view class='skill' >
    <view class='box'>
      <view class='skill-item'  wx:for='{{skill}}'>
        <image class='icon' src='{{item.icon}}'></image>
        <view class='name'>{{item.name}}</view>
      </view>
    </view>
  </view>

第二，循环的.box设置了宽度100%

只改样式，不改布局

.skill {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
}
.skill  .box {
  box-sizing: border-box;
  flex: 0 0 33.3333333333333%;
  font-size: 24rpx;
  color: #535353;
  background-color: white;
  padding: 40rpx;
  text-align: center;
}
.skill .icon {
  height: 50rpx;
  width: 50rpx;
  margin: 15rpx;
}
.skill .name {
  margin: 0 auto;
}

Answer 2

skill这个view是不是宽度没展开？

Answer 3

也遇到了同样的问题，目前也没有找到合适的兼容方法。
经测试只有i6plus这机型才会这样，微信社区也有人提出过这个问题。
https://developers.weixin.qq....