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

问题

flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行。(如下图所示)
flex布局 flex-wrap:wrap 自动换行属性,导致两行div中间有大空行。_第1张图片

解决

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

解决后:
flex布局 flex-wrap:wrap 自动换行属性,导致两行div中间有大空行。_第2张图片
测试代码如下:


<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布局》

你可能感兴趣的:(css)