CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题

最新推荐文章于 2024-05-23 19:29:03 发布

夜码狂农

最新推荐文章于 2024-05-23 19:29:03 发布

阅读量1.2w

点赞数 6

分类专栏： css 文章标签： flex flex布局 align-content css布局

本文链接：https://blog.csdn.net/u012443286/article/details/103516975

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在使用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>
</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>