flex布局⾃动换⾏并对齐HTML代码
<view class="con">
<view class="one">
<view class="">237</view>
<view class="">浏览次数</view>
</view>
<view class="one">
<view class="">237</view>
<view class="">浏览次数</view>
</view>
<view class="one">
<view class="">237</view>
<view class="">浏览次数</view>
</view>
<view class="one">
<view class="">237</view>
<view class="">浏览次数</view>
</view>
<view class="one">
<view class="">237</view>
<view class="">浏览次数</view>
</view>
</view>
css代码
.con{
padding-bottom: 30rpx;
display: flex;
flex-wrap: wrap;//⾃动换⾏
justify-content: space-between;//两端对齐
//伪类填充
&::after{
content: '';
flex: 1;
}
.one{
background-color: #F6FAFE;
padding: 33rpx 26rpx;
width: 226rpx;
margin-top: 12rpx;
view{
&:first-child{
flex布局对齐方式font-size: 32rpx;
color: #313249;
font-weight: bold;
line-height: 45rpx;
}
&:last-child{
font-size: 26rpx;
color: #878794;
line-height: 37rpx;
}
}
}
}