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

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

WXML：

{{item.name}}

￥{{item.price}}

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;

}

标签：box,flex,goods,color,list,item,对齐,overflow,CSS

来源： https://blog.csdn.net/dyyzht/article/details/115345300