css flex 布局换行

默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;就行了，效果图

.app-center {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}

通过上面我们发现虽然时间换行了，但是每行的边距不一样

加上这个就行了：flex: 1 0 calc(20% - 40px); /* 控制一行显示5个，设置间距为20px */，最后效果

整体代码

<van-nav-bar title="应用中心" fixed="false" placeholder="false" custom-class="nav" title-class="nav-title">
  <!-- <view slot="left" class="leftIcon">
    <van-icon name="arrow-left" color="white" size="15px" />
  </view> -->
</van-nav-bar>
<scroll-view class="scrollarea" show-scrollbar="{{false}}" enhanced="{{true}}" enable-passive="{{true}}" scroll-y="{{true}}">
  <view class="container">
    <view class="app-module">
      <text class="module-title">应付</text>
      <view class="app-center">
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
        <view class="app-item">
          <!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> -->
          <van-icon name="setting-o" size="30px" />
          <text class="app-title">发起</text>
        </view>
      </view>
    </view>
  </view>
</scroll-view>

.app-module{
  background-color: #FFFFFF;
  height: auto;
  border-radius: 5px;
  padding: 10px 10px 0px 10px;
}
 
.app-center {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
 
.app-module .module-title {
  font-weight: bold;
}
 
 
.app-item {
  flex: 1 0 calc(20% - 40px); /* 控制一行显示5个，设置间距为20px */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx;
  padding: 5px;
}
 
.app-icon {
  width: 80rpx;
  height: 80rpx;
}
 
.app-title {
  margin-top: 10rpx;
  font-size: 14px;
}