CSS开发技巧（四）：解决flex多⾏布局的⾏间距异常、⼦元素⾼度拉伸问题
在使⽤flex布局时，若出现换⾏，有两种较为特殊的现象是值得我们研究的：
⼦元素⾼度被拉伸，其实际⾼度⼤于它的内容⾼度。
各⾏⼦元素之间的⾏间距过⼤，甚⾄我们根本没有给⼦元素设置margin。
现在我们将要探究引发这两种现象的原因及解决⽅案。
⼀、⼦元素⾼度拉伸问题
原因：没有明确声明⼦元素的⾼度。
现象：⼦元素⾼度没有明确声明时，若容器有纵向空余⾼度，各⾏⼦元素将均分空余⾼度。
解决⽅案：明确声明各⼦元素的⾼度。
特别说明：不换⾏也会均分，与⾏数⽆关。
案例：（可直接运⾏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
height: 600px;
width: 800px;
border: 1px solid red;
}
.item{
margin-right: 20px;
margin-bottom: 20px;
width: 200px;
background-color: green;
}
.
item-content{
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中，每个.item元素的内容⾼度由.item-content撑起来，为200px，实际⾼度却为280px。这是由于我们没有显式声明.item元素的⾼度，采⽤flex多⾏布局并且容器有空余，那么各⾏⼦元素将均分容器的剩余⾼度，可采⽤给.item设置height为200px来解决该问题。
⼆、⾏间距异常问题
原因：没有明确声明各⾏元素的纵向排列⽅式。
现象：默认情况下，若容器有纵向空余⾼度，且⼦元素⾼度已显⽰声明，那么各⾏将出现额外⾏间距，
且每两⾏的⾏间距相等。
解决⽅案：设置align-content属性。
特别说明：不换⾏也会均分，与⾏数⽆关。
案例：（可直接运⾏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/* align-content: flex-start; */
height: 600px;
width: 800px;
border: 1px solid red;
}
.item{
margin-right: 20px;
margin-bottom: 20px;
height: 200px;
width: 200px;
background-color: green;
}
.item-content{
height: 200px;
}
</style>
html的flex布局
</head>
<body>
<div class="container">
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
<div class="item">
<div class="item-content"></div>
</div>
</div>
</body>
</html>
在以上案例中，我们希望各⾏的⾏间距是我们设置的margin-bottom的值20px，那么我们只需给容器设置align-content: flex-start；即可。这将使得各⾏紧密排列，剩余空间都到了容器的底部。更多的排列⽅式可查阅align-content⽂档。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。