之所以會出現(xiàn)多列等高布局，是因為在網(wǎng)頁設(shè)計中可能會出現(xiàn)以下狀況。
出現(xiàn)這種情況的原因也很簡單，就是各個 div 標(biāo)簽中的 p 所占高度不同，而且我們并沒有明確的給 div 一個高度。
之所以沒有給 div 指定高度，是因為我們事先并不知道這個標(biāo)簽會占多高，而且就算我們知道，直接為所有 div 硬性的設(shè)置一個高度也是沒有靈性的做法。
所以我們該怎么辦呢？其實核心代碼只有三行，如下所示
.container {
overflow: hidden;
}
div.item {
padding-bottom: 500px;
margin-bottom: -500px;
}
設(shè)置完以上代碼，現(xiàn)在的情況就變成了這樣。
下面來解釋它的工作原理，首先， padding-bottom: 500px 會讓三個盒子拉伸的非常高，然后利用 margin-bottom: -500px 將各個元素切割掉 500px，最后父元素將超出的部分隱藏，就出現(xiàn)了這個效果。
你可能對切割這個概念非常模糊，所以我推薦你去看以下文章，相信你看完之后就明白了。
《CSS布局奇淫巧計之-強(qiáng)大的負(fù)邊距》
《負(fù)值之美：負(fù)margin在頁面布局中的應(yīng)用》
利用 FlexBox
不得不說，上面的方法很好用，不過我們還能夠更簡潔一點，簡潔的讓你不敢相信！其實，我們只需要為父布局設(shè)置一行 display: flex 就可以了！
而且，之前在沒有利用 flex 的時候，我們?yōu)榱俗屓齻€元素保持在同一行，還不得不為每個 div.item 設(shè)置浮動屬性。
那么為什么 display: flex 就可以完成以上那么多代碼才能夠完成的任務(wù)呢？這依賴于 align-items 屬性，它的默認(rèn)值是 stretch，也就是在輔軸上將所有子項目拉伸為同一高度（或?qū)挾龋┮员３謱R。
如果你對 flex 了解還不是很了解，那么建議去閱讀以下文章。
