【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;
}
borderbox
.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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。