当前位置:网站首页>在项目中使用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;
}

边栏推荐
猜你喜欢
随机推荐
更新啦~人生重开模拟器自制
C语言学习记录--变量基本类型和内存大小
字符与字符串
[C language advanced] The first in-depth analysis of the storage of integer data in memory (1)
【背包】采药题解
【记录】没用知识点 - 智力题
ClionIDE compiles by specifying the compiler
【分享】一个免费语料库
The most complete installation tutorial of Pytorch (one step)
简单做份西红柿炒蛋778
(一)性能实时监控平台搭建(Grafana+Influxdb+Jmeter)
Solidrun hummingboard制作SD卡
原生态mongo连接查询代码
C语言结构体——位段概念的讲解
LeetCode1166.设计文件系统
Flask framework to study: the debug and configuration items
(2) Construction of a real-time performance monitoring platform (Grafana+Prometheus+Jmeter)
华为od德科面试数据算法解析 2022-8-10 迷宫问题
【win10+cuda7.5+cudnn6.0安装caffe④】安装pycaffe
flaks framework learning: adding variables to the URL









