flex布局-设置了jutify-content:space-between以后最后一行靠左排列_space-between 换行如何让从左排序-CSDN博客

本文链接：https://blog.csdn.net/xumengxiang/article/details/109855200

当使用Flex布局并设置`justify-content:space-between`时，最后一行元素会靠左排列。文章介绍了两种解决方法：1. 通过计算margin值为最后一个元素设置合适的`margin-right`；2. 在最后一行后面添加列数减2的空元素来保持对齐。这两种方法适用于不同情况，例如最后一行为2或3个元素时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex布局-设置了jutify-content:space-between以后最后一行靠左排列


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局最后一行靠左</title>
	<style type="text/css">
		.container{
			width: 1000px;
			height: 300px;
			display: flex;
			flex-wrap: wrap;
			align-items:flex-start;
			justify-content: space-between;
		}
		.inner{
			width: 220px;
			height: 80px;
			text-align: center;
			line-height: 80px;			
			background-color: #FFC0CB;
			
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="inner">1</div>
		<div class="inner">2</div>
		<div class="inner">3</div>
		<div class="inner">4</div>
		<div class="inner">5</div>
		<div class="inner">6</div>
		<div class="inner">7</div>	
	</div>
	
</body>
</html>

在这里插入图片描述
此时如果想让6跟7左对齐可以用如下方法

**第一种方法: 计算具体的margin值给内个盒子设置一个margin-right **


		/* 盒子大小是220 总宽度是1000  计算出间隔(1000-220*4) /3   此方法可以不用设置justify-content:space-between;但是计算比较复杂*/
		.inner{
			margin-right: calc((1000px - 220px * 4)/3);
		}
		.inner:nth-child(4n){
			margin-right: 0;/* 设置每一行最后一个右边距为0 */
		}

在这里插入图片描述

第二种方法: 在最后一行的最后面加上列数-2个空盒子
列数-2? 因为最后一行只有一个或者满列的时候都不需要加去掉这两个情况都需要加所以是列数-2个
就拿本例子来说只有最后一行是2个或者3个的时候才需要加盒子

.inner:nth-last-child(-n+2){
			height: 0;
			border: 0;
			padding: 0;
			/* 凡是前面个盒子设置了占用大小的属性 最后的空盒子都设置为0 */
		}


/* 在最后面加上两个空盒子 只占用宽度*/
<div class="container">
		<div class="inner">1</div>
		<div class="inner">2</div>
		<div class="inner">3</div>
		<div class="inner">4</div>
		<div class="inner">5</div>
		<div class="inner">6</div>
		<div class="inner">7</div>
		<div calss="inner"></div>
		<div class="inner"></div>
	</div>