flex布局 平均分布，最后一行左对其

html

<view class="box container">  <view class="user-item" wx:for="{{userList}}" wx:key="index">    <image class="user-avatar" src="{{item.avatarUrl}}"></image>    <view class="user-name">{{item.nickName}}</view>  </view></view>

css

.box {  display: flex;  flex-wrap: wrap;  justify-content: space-between;}.box:after {    content: "";    flex: auto; }.user-item {  display: inline-block;  margin: 10rpx;}.user-item .user-avatar {  width: 74rpx;  height: 74rpx;  border-radius: 50%;}.user-item .user-name {  color: #333;  font-size: 24rpx;  text-align: center;  width: 74rpx;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

js

 userList: [{        avatarUrl: 'https://images.unsplash.com/photo-1578513492798-0f8a1ac3e1f0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',        nickName: '二狗'      }]

参考：

• flex 最后一行左对齐
• flex 语法教程

原著是一个有趣的人,若有侵权,请通知删除