之所以会出现多列等高布局，是因为在网页设计中可能会出现以下状况。
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，最后父元素将超出的部分隐藏，就出现了这个效果。
你可能对切割这个概念非常模糊，所以我推荐你去看以下文章，相信你看完之后就明白了。
利用 FlexBox
不得不说，上面的方法很好用，不过我们还能够更简洁一点，简洁的让你不敢相信！其实，我们只需要为父布局设置一行 display: flex 就可以了！
而且，之前在没有利用 flex 的时候，我们为了让三个元素保持在同一行，还不得不为每个 div.item 设置浮动属性。
那么为什么 display: flex 就可以完成以上那么多代码才能够完成的任务呢？这依赖于 align-items 属性，它的默认值是 stretch，也就是在辅轴上将所有子项目拉伸为同一高度（或宽度）以保持对齐。
如果你对 flex 了解还不是很了解，那么建议去阅读以下文章。
