flex布局一旦遇上for循环就失效
代码如下：
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部分：（在data里面）
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的知不知道这问题是为什么。
谢谢各位。
补充内容：
我的目的是希望能够布局三个方块一行然后一行一行继续排列下去的效果。
强力驱动