微信小程序使用wx:for时flex布局不生效

<view class="flexDemo" wx:for="{{4}}" wx:key="id">
  <image src="/images/logo.png" class="imageCSS">image>
view>

.flexDemo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 150rpx;
  margin-bottom: 150rpx;
}
.imageCSS {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 10rpx;
}

可以看到写了flex布局但图片并没有排列成一行

问题经过检索发现应该把wx: for这一循环用的语句写在内层

<view class="flexDemo">
  <image src="/images/logo.png" class="imageCSS"
    wx:for="{{4}}" wx:key="id">image>
view>

这样写和下面的写法效果是一样的

<view class="flexDemo">
  <image src="/images/logo.png" class="imageCSS">image>
  <image src="/images/logo.png" class="imageCSS">image>
  <image src="/images/logo.png" class="imageCSS">image>
  <image src="/images/logo.png" class="imageCSS">image>
view>

问题便得到解决