CSS——flex 巧用伪类
一、需求描述:
图片数量不固定,一行放两个
1.图片奇数个时,最后一张图片铺满整行
2.图片偶数个时,最后一行还是一行放两个
解决思路:偶数时不变都是一行放两个,只有在奇数的时候最后一行放一个,所以只需要把奇数的最后一行宽度设置成100%
HTML
<view class="index"> <view class="many"> <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F200155xgo7jhigcbjcw39j.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628513437&t=9f76c9610de34867bef45ca1ce963ca4"> </image> <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F200155xgo7jhigcbjcw39j.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628513437&t=9f76c9610de34867bef45ca1ce963ca4"> </image> <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F200155xgo7jhigcbjcw39j.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628513437&t=9f76c9610de34867bef45ca1ce963ca4"> </image> <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F07%2F200155xgo7jhigcbjcw39j.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628513437&t=9f76c9610de34867bef45ca1ce963ca4"> </image> </view> </view>
CSS
.index{
padding: 0 32rpx;
}
.many{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.many image{
width: 48%;
height: 336rpx;
margin: 10rpx 0;
border-radius: 8rpx;
}
.many image:nth-child(odd){
&:last-child{
width: 100%;
}
}