多列等高布局

之所以会出现多列等高布局，是因为在网页设计中可能会出现以下状况。

1.png

出现这种情况的原因也很简单，就是各个 div 标签中的 p 所占高度不同，而且我们并没有明确的给 div 一个高度。

之所以没有给 div 指定高度，是因为我们事先并不知道这个标签会占多高，而且就算我们知道，直接为所有 div 硬性的设置一个高度也是没有灵性的做法。

所以我们该怎么办呢？其实核心代码只有三行，如下所示

.container {
    overflow: hidden;
}

div.item {
    padding-bottom: 500px;
    margin-bottom: -500px;
}

设置完以上代码，现在的情况就变成了这样。

2.png

下面来解释它的工作原理，首先， padding-bottom: 500px 会让三个盒子拉伸的非常高，然后利用 margin-bottom: -500px 将各个元素切割掉 500px，最后父元素将超出的部分隐藏，就出现了这个效果。

你可能对切割这个概念非常模糊，所以我推荐你去看以下文章，相信你看完之后就明白了。

《CSS布局奇淫巧计之-强大的负边距》

《负值之美：负margin在页面布局中的应用》

利用 FlexBox

不得不说，上面的方法很好用，不过我们还能够更简洁一点，简洁的让你不敢相信！其实，我们只需要为父布局设置一行 display: flex 就可以了！

而且，之前在没有利用 flex 的时候，我们为了让三个元素保持在同一行，还不得不为每个 div.item 设置浮动属性。

那么为什么 display: flex 就可以完成以上那么多代码才能够完成的任务呢？这依赖于 align-items 属性，它的默认值是 stretch，也就是在辅轴上将所有子项目拉伸为同一高度（或宽度）以保持对齐。

如果你对 flex 了解还不是很了解，那么建议去阅读以下文章。

《A Complete Guide to Flexbox》