【微信小程序】flex布局一旦遇上for循環(huán)就失效

代碼如下：

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: '文獻(xiàn)調(diào)查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文獻(xiàn)調(diào)查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文獻(xiàn)調(diào)查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文獻(xiàn)調(diào)查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文獻(xiàn)調(diào)查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文獻(xiàn)調(diào)查'
      },
    ]

目前結(jié)果呈現(xiàn)：

完全不明白為什么，明明flex-direction已經(jīng)設(shè)置了是row了，還是像column一樣豎著拍下來了。

沒有進(jìn)一步學(xué)習(xí)過vue，所以不知道各位懂vue的知不知道這問題是為什么。

謝謝各位。

補(bǔ)充內(nèi)容：

我的目的是希望能夠布局三個(gè)方塊一行排列下去的效果。