弹性布局多列换行居左布局,flex布局下两端对齐，不满左对齐

最新推荐文章于 2024-05-23 19:29:03 发布

猫儿念你

最新推荐文章于 2024-05-23 19:29:03 发布

阅读量1.2w

点赞数 7

分类专栏：前端学习-原创文章标签： flex html css

本文链接：https://blog.csdn.net/qq_35779070/article/details/107211103

版权

前端学习-原创专栏收录该内容

35 篇文章 0 订阅

订阅专栏

弹性布局多列换行居左布局,flex布局下两端对齐，不满左对齐

问题情境：

在flex布局下，多行排列，如何让flex布局最后一行没有排满时，向左对齐排列且与上面的行间距相同。

实现效果：

<!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;
	}

猫儿念你

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
6
评论
弹性布局多列换行居左布局,flex布局下两端对齐，不满左对齐

弹性布局多列换行居左布局,flex布局下两端对齐，不满左对齐问题情境：在flex布局下，多行排列，如何让flex布局最后一行没有排满时，向左对齐排列且与上面的行间距相同。实现效果：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css">
复制链接

扫一扫