flex布局设置justify-content为space-between，最后一个元素无法右对齐

最新推荐文章于 2024-09-24 11:41:48 发布

djs0513

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量3.5k

点赞数

分类专栏： web前端文章标签： flex css css3 html

原文链接：http://www.web315.net/doc/49.html

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文探讨了在使用Flex布局时，justify-content:space-between属性导致的最后一项元素无法完全右对齐的问题，并提供了两种解决方案：一是通过设置元素的margin为auto，二是移除用于清除浮动的:after伪元素。

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

给flex盒子设置justify-content:space-between，双行排列时出现最后一个元素无法右侧对齐的情况，如下图所示。

space-between最后一个元素无法右对齐
可以看到item4和item2在右侧没有对齐，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		.box {width: 400px;background: #eee;float: left;padding: 5%;}
		.flex {display: flex;flex-wrap: wrap;justify-content: space-between;}
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
		}
		.item {width: 45%;height: 100px;margin-bottom:10%;background:#fff;list-style:none;text-align: center;line-height: 100px;font-size:20px;color:#333;}
		.item:nth-child(n+3) {margin-bottom: 0;}
	</style>
</head>
<body>
	<div class="box">
		<ul class="flex clearfix">
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
		</ul>
	</div>
</body>
</html>