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

问题

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>
  • 知识点:

flex-wrap属性:

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

align-content属性:

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

参考:
《flex布局》


版权声明:本文为DemoJx原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。