代码如下：

wxml部分：

{{item.name}}

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的知不知道这问题是为什么。

谢谢各位。

补充内容：

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