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

作者：小丑西瓜9 | 2024-03-14 13:20:34

踩

flex-wrap: wrap 空白

问题

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

知识点：

flex-wrap属性：

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行？
flex-wrap:wrap 该样式用于设置换行。

align-content属性：

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐）

参考：
《flex布局》

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/234755