微信小程序,购买商品属性自动换行,固定div个数,超出部分自动换行
参考**指定每行div个数(三个为例)**
<view class="spec">
<view class="spec_title">颜色</view>
<view class="spec_content">
<view class="spec_back">
<text class="spec_text">白色</text>
</view>
<view class="spec_back">
<text class="spec_text">红色</text>
</view>
<view class="spec_back">
<text class="spec_text">蓝色</text>
</view>
<view class="spec_back">
<text class="spec_text">绿色</text>
</view>
<view class="spec_back">
<text class="spec_text">金色</text>
</view>
<view class="spec_back">
<text class="spec_text">黄色</text>
</view>
</view>
</view>
.spec {
padding: 10rpx;
}
.spec .spec_title {
margin: 10rpx;
font-size: 30rpx;
}
.spec .spec_content {
display: flex;
/* justify-content: flex-start; */
flex-flow: row wrap;
align-content: flex-start;
}
.spec .spec_content .spec_back {
margin: 10rpx;
width: 150rpx;
height: 80rpx;
background-color: #f0f0f0;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
border-radius: 10rpx;
}