【CSS】flex布局实现一行展示三个子元素并两端对齐

本代码在微信小程序里实现，效果如下：

WXML：

<view class="goods-box">
  <view class="list">
    <view class="list-item" wx:for="{{productList}}" wx:key='item' data-item="{{item}}">
      <image src="{{item.logourl}}" mode="aspectFill"></image>
      <view class="item-title">{{item.name}}</view>
      <view class="item-price">￥{{item.price}}
      </view>
    </view>
  </view>
</view>

WXSS:

.goods-box {
  background-color: #f9f9f9;
  padding: 32rpx;
  overflow: hidden;
}

.goods-box .list {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}

.goods-box .list-item {
  width: 216rpx;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}

.goods-box .list-item image {
  width: 100%;
  height: 216rpx;
  display: block;
  background: #ddd;
  border-radius: 16rpx;
}

.goods-box .list-item .item-title {
  color: #333;
  font-size: 28rpx;
  margin: 16rpx 0;
  display: -webkit-box;
  display: -moz-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.goods-box .list-item .item-price {
  color: #F86363;
  font-size: 32rpx;
  overflow: hidden;
}

.goods-box .list-item .item-price text {
  color: #aaa;
  font-size: 28rpx;
  text-decoration: line-through;
  margin-left: 8rpx;
}