flex布局设置space-between(around)最后一行不左对齐问题

需求在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐；
问题：使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图，

方法：
一、添加几个空格子，格子高度为0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.box {
			width: 300px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
		.item-empty {
	        height: 0px;
	        width: 300px;
	      }
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="item-empty"></div>
        <div class="item-empty"></div>
	</div>
</body>
</html>

二、使用伪类after

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex弹性布局</title>
	<style>
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.container:after{
			content:'';
			/*这个宽度和子元素宽度一致*/
			width: 480px;
			height: 0;
			display: block;
		}
		.box {
			width: 480px;
			height: 100px;
			background-color: red;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
		<div class="box">3</div>
	</div>
</body>
</html>

原文链接：https://blog.csdn.net/qq_44716411/article/details/108509790