flex 布局之左右边距对齐，换行左对齐2 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		li {
			list-style: none;
		}

		.List {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10px;
		}
		.List:after{
			content: "";
			flex: auto;
		}

		.item {
			/* 宽度是固定好的 */
			width: 220px;
			height: 60px;
			background-color: azure;
			margin-bottom: 10px;
			border: 1px solid red;
			/*这个数值需要自己去调*/
			margin-right: 17px;
		}
		.item:nth-child(5n){
			/* 尽量让item在list中居中，两边都没有margin */
			margin-right: 0;
		}
		
	</style>
	<body>
		<div id="" style="width: 1200px;margin: auto;background-color: #cccccc;height: 500px;">
			<ul class="List">
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				
			</ul>
		</div>

	</body>
</html>

重要代码：要加after以及每个item的margin-right

.List:after{
		content: "";
		flex: auto;
	}
posted @ 2023-09-27 15:47  猖狂的小山猪  阅读(142)  评论(0)  编辑  收藏  举报