为什么行与行之间会有一大段空间？
来源：3-8 移动webapp入门（2）
慕尼黑5122342
2019-12-24 20:45:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>3.4 flex布局--容器的属性</title>
<link rel="stylesheet" href="css/flex.css">
<style>
*{
padding:0;
margin:0;
list-style:none;
}
.box {
/*width: 100%;*/
display: flex;
}
.box-1 {
display: inline-flex;
}
/*7、align-content 属性*/
.box-7-1{
flex-wrap: wrap;
/*align-content: flex-start;*/
}
</style>
</head>
<body>
<!-- 头部 -->
<p>flex-start：交叉轴的起点对齐</p>
<div class="box box-tall box-7-1">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
<div class="box-item">6</div>
<div class="box-item">7</div>
<div class="box-item">8</div>
<div class="box-item">9</div>
</div>
</body>
</html>
1回答
-
同学你好，指的是这里的间隙吗？
align-content属性默认值为stretch，元素被拉伸以适应容器，各行将会伸展以占用剩余的空间。加上div大盒子设置高度为800px，所以剩余空间均分之后，每行占据的高度是一致的，也就出现了空白部分。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题