flex-direction row在v-for命令下不生效

uni-app新手，请教大神们一个问题，我想在一个view中添加 25个子view（5行5列），父view属性设置如下：
.game-area{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
子View属性设置：
.light-block{
width: 100rpx;
height: 100rpx;
}
模板如下：

<view class="game-area" v-for="(light, index) in lights" :key = "index">  
    <view class="light-block"></view>  
</view>

lights是一个有25个对象元素的数组。

显示后25个view排成了一列，row属性不起任何作用。如果不用v-for指令，手动添加，是没有问题的。这是为什么，有什么解决方案吗，先行谢过！