自适应布局，平均分配，自动换行，上下对齐

原创于 2025-04-18 19:53:43 发布 · 498 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

10 篇文章

订阅专栏

前言

做一个桌面应用的需求，要求所有元素平铺排列，窗口大小改变后会自动换行，且上下对齐

flex布局

在flex布局中，如果使用justify-content: space-between; 最后一行没铺满的时候也会左右对齐，不能达到上下对齐的效果，所以需要设置after，让最后一行变成左对齐。

<!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){
			margin-right: 0;
		}
		
	</style>
	<body>
		<div 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>

在这里插入图片描述
这里每个item的margin-right要调整，才能达到上下对齐的效果

问题一

对于桌面工具来说，窗口缩放时margin的比例会改变，造成最后一行与上面不能对齐的情况。
这种方法对于固定宽度的窗口是有效的。
解决：给每一个item设置flex的比例：

		.item {
			flex: 0 0 20%
			height: 60px;
			background-color: azure;
			margin-bottom: 10px;
			border: 1px solid red;
			padding: 10px;
		}

这种方法虽然可以自动让上下对齐，但也有缺点，它的一行只能放5个元素了，如果窗口变大也不会增多元素。

grid布局

改成grid布局，可以完美实现这个需求

    .list {
        display: grid;
        /* 根据容器宽度自动填充列 */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        justify-items: stretch;
    }

在这里插入图片描述