【css_flex：最后一行分散问题】解决方案

最新推荐文章于 2024-06-12 13:25:41 发布

常安cc

最新推荐文章于 2024-06-12 13:25:41 发布

阅读量488

点赞数

分类专栏： css 前端文章标签： css 前端

本文链接：https://blog.csdn.net/m0_55546349/article/details/126363157

版权

前端同时被 2 个专栏收录

92 篇文章 5 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS Flexbox解决最后一行元素分散的问题。通过设置`.baseImg:nth-child(4n)`的`margin-right`为0，可以确保最后一排的元素不再按常规间距分布，实现整齐排列的效果。这种方法适用于知晓元素总数的情况，例如每行显示4个元素。

摘要由CSDN通过智能技术生成

css_flex：最后一行分散问题。解决方案

在这里插入图片描述

解决最后一排分开排列
看你一行有几个，给最后一个的margin-right设为0就可以了
4n：是几个就设置xn

<div class="box" style="display: block;">
	<div class="title">图片:</div>
	<div class="imgBox">
		<img class="baseImg" src="loginLogo.png" alt="">
		<img class="baseImg" src="loginLogo.png" alt="">
		<img class="baseImg" src="loginLogo.png" alt="">
		<img class="baseImg" src="loginLogo.png" alt="">
		<img class="baseImg" src="loginLogo.png" alt="">
		<img class="baseImg" src="loginLogo.png" alt="">
	</div>
</div>


.imgBox {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 10px 0;
	/* justify-content: space-between; */
}

.baseImg {
	width: 22%;
	height: 80px;
	opacity: 1;
	border-radius: 0px;
	margin-bottom: 12px;
	margin-right: 12px;
}

/* 解决最后一排分开排列 */
.baseImg:nth-child(4n) {
	margin-right: 0;
}