当前位置：网站首页>在项目中使用flex布局的justify-content:space-around；遇到的问题，（数量为单数）

在项目中使用flex布局的justify-content:space-around；遇到的问题，（数量为单数）

2022-08-11 05:17:00 【肖肖冲鸭】

在做项目时，使用flex布局设置样式，商品数为单数，因为使用了justify-content：space-around；样式，导致要是商品数量为单数时，最后一个商品会平均分配两边的留白（原本最后一个商品应该靠左显示）
代码如下

.shopList{
    
	display flex
	flex-wrap wrap
	justify-content space-around			
}
.shopList .shopItem{
    
	width 344rpx
}

在这里插入图片描述
解决思路：
因为最后一个商品落单,所以会导致这个问题，应该利用伪元素去解决，在最后添加一个空白的元素，因为是使用flex布局，如果数量为偶数的话，元素不显示，因为没有设置高度，但是为奇数的话，元素会撑满剩下的宽度
解决代码`

.shopList{
    
	display flex;
	flex-wrap wrap;
	justify-content space-around;		
}
.shopList::after{
    
	content '';
	width 344rpx;
}	
.shopList .shopItem{
    
	width 344rpx;
}

在这里插入图片描述

原网站

版权声明
本文为[肖肖冲鸭]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_48952990/article/details/126022163

边栏推荐

猜你喜欢

随机推荐