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;
}