『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。

最新推荐文章于 2024-04-11 08:48:59 发布

置顶 DemoJx

最新推荐文章于 2024-04-11 08:48:59 发布

阅读量3w

点赞数 13

分类专栏： css 文章标签： flex css

本文链接：https://blog.csdn.net/DemoJx/article/details/102696073

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题

flex布局，用了flex-wrap:wrap;自动换行属性后，导致两行div中间有空行。(如下图所示)
在这里插入图片描述

解决

给外层父元素添加 align-content：flex-start 样式

解决后：
在这里插入图片描述
测试代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<style>
		.out {
			height:200px;
			width:500px;
			border:1px solid black;
			display:flex;
			flex-wrap:wrap;
			align-content:flex-start; //解决问题的样式
		}
		.in {
			height:25%;
			width:25%;
			box-sizing:border-box;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div class="out">
		<div class="in"></div>
		<div class="in"></div>
		<div class="in"></div>
		<div class="in"></div>
		<div class="in"></div>
		<div class="in"></div>
	</div>
</body>
</html>