多栏等高布局

最近在项目中遇到了两栏等高布局的需求，大致记得之前好像看过类似文章。但当时记得用的方法是padding+margin的方法实现的，但做过几个项目之后发现flex布局是真的香，便用flex布局实现了需求。但既然遇到了，今天就再总结一下吧。

margin和padding配合实现

这种方法应该是比较复杂的，大概思路就是让行内元素把块级元素撑开然后展示隐藏的底填充(padding-bottom)部分。这么说可能比较抽象，那就配着代码一步步的剖析下这种方法的原理吧。

先让多个盒子排列在一行中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter {
            width: 420px;
            background-color: yellow;
        }

        .inner1 {
            width: 100px;
            background-color: teal;
        }

        .inner2 {
            width: 100px;
            background-color: red;
        }

        .inner3 {
            width: 100px;
            background-color: green;
        }

        .inner4 {
            width: 100px;
            background-color: blue;
        }
        .inner1,
        .inner2,
        .inner3,
        .inner4 {
            display: inline-block;
        }

    </style>
</head>

<body>
    <div class="outter">
        <div class="inner1"></div>
        <div class="inner2"></div>
        <div class="inner3"></div>
        <div class="inner4"></div>
    </div>
</body>

给内部盒子设置padding-bottom

        .inner1,
        .inner2,
        .inner3,
        .inner4 {
            display: inline-block;
            padding-bottom: 999px;
        }

padding填充

可以看出因为给了padding所以inner把outter撑开了，所以这个时候我们就用到了margin属性。

让margin为负数“抵消”被padding撑开的高度

        .inner1,
        .inner2,
        .inner3,
        .inner4 {
            display: inline-block;
            margin-bottom: -999px;
            padding-bottom: 999px;
        }

抵消padding

margin为负数的时候，会减少自身供css读取的高度。所以outter就不会被inner的padding撑开了，这里有margin为负数时的几种行为表现。

给不用适应的元素增加高度
我们这里让inner2，inner3，inner4去适应inner1，所以给inner1添加height属性。

        .inner1 {
            display: inline-block;
            width: 100px;
            height: 150px;
            background-color: teal;
        }

给inner1设置height

是不是感觉莫名其妙，为啥inner2，inner3，inner4都在下面呢。因为inner2，inner3，inner4的高度都为0，而且行内元素的默认对齐方式是baseline，也就1个高度为150px的元素和3个高度为0的元素基于底部对齐了。下图中红线就是他们的对齐线。

基于底部对齐

为了让他们等高且基准相同，就要他们设置vertical-align了。

设置vertical-align

        .inner1,
        .inner2,
        .inner3,
        .inner4 {
            display: inline-block;
            margin-bottom: -999px;
            padding-bottom: 999px;
            vertical-align: top;
        }

等高布局.png

当当当当，这个时候我们就完成了等高布局。你可以给任意一个inner高度来让其他inner自适应给定元素的高度。

flex布局实现多栏等高

flex布局里有个属性align-items，这个属性有个属性值叫strech（我严重怀疑这个属性就是为这个需求而生的）。使用这个属性实现多栏等高布局真的是特别方便。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter {
            width: 400px;
            background-color: yellow;
            display: flex;
            align-items: stretch;
        }

        .inner1 {
            width: 100px;
            height: 150px;
            background-color: teal;
        }

        .inner2 {
            width: 100px;
            background-color: red;
        }

        .inner3 {
            width: 100px;
            background-color: green;
        }

        .inner4 {
            width: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="outter">
        <div class="inner1"></div>
        <div class="inner2"></div>
        <div class="inner3"></div>
        <div class="inner4"></div>
    </div>
</body>

</html>

flex布局

是不是代码又少效果又好~~~一方面避免了使用margin的各种衍生问题，也不用去考虑什么各种对齐方式了。最主要是的是代码看起来真的是很舒服啊有木有。ps：不过考虑到有些浏览器版本和移动端（尤其是有些安卓机子）对flex兼容的不太好，有时还是要用margin+padding的方法的。

最后编辑于：2021.03.16 10:49:33