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

怡然一记 • 2022-11-20 • 技术分享 • 91 阅读

在使用flex布局时，若出现换行，有两种较为特殊的现象是值得我们研究的：

现在我们将要探究引发这两种现象的原因及解决方案。

一、子元素高度拉伸问题


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta httpss-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-撑起来css 行间距，为200px，实际高度却为280px。这是由于我们没有显式声明.item元素的高度，采用flex多行布局并且容器有空余，那么各行子元素将均分容器的剩余高度，可采用给.item设置为200px来解决该问题。

二、行间距异常问题


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta httpss-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>

在以上案例中，我们希望各行的行间距是我们设置的-的值20pxcss 行间距，那么我们只需给容器设置align-: flex-start；即可。这将使得各行紧密排列，剩余空间都到了容器的底部。更多的排列方式可查阅align-文档。

怡然一记
CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
https://xsunhua.cn/452.html
THE END
分享
二维码
打赏
海报
CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时，若出现换行，有两种较为特殊的现象是值得我们研究的：一、子元素高度拉伸问题item元素的内容高度由.这是由于我们没有显式声明.item元素的高度，采用flex多行布局并且容器有空余，那么各行子元素将均分容器的剩余高度，可采用给.二、行间距异常问题这将使得各行紧密排列，剩余空间都到了容器的底部。更多的排列方式可查阅align-文档。
<<上一篇
下一篇>>