代码如下： 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[代码][代码]: [代码][代码]24[代码][代码]rpx;[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#535353[代码][代码];[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]white[代码][代码];[代码][代码]  [代码][代码]padding[代码][代码]: [代码][代码]40[代码][代码]rpx;[代码][代码]  [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].skill .[代码][代码]icon[代码] [代码]{[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]50[代码][代码]rpx;[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]50[代码][代码]rpx;[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]15[代码][代码]rpx;[代码][代码]}[代码][代码].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的知不知道这问题是为什么。 谢谢各位。 补充内容： 我的目的是希望能够布局三个方块一行然后一行一行继续排列下去的效果。