之所以會(huì)出現(xiàn)多列等高布局绘证，是因?yàn)樵诰W(wǎng)頁設(shè)計(jì)中可能會(huì)出現(xiàn)以下狀況隧膏。
出現(xiàn)這種情況的原因也很簡(jiǎn)單，就是各個(gè) div 標(biāo)簽中的 p 所占高度不同嚷那，而且我們并沒有明確的給 div 一個(gè)高度胞枕。
之所以沒有給 div 指定高度，是因?yàn)槲覀兪孪炔⒉恢肋@個(gè)標(biāo)簽會(huì)占多高魏宽，而且就算我們知道腐泻，直接為所有 div 硬性的設(shè)置一個(gè)高度也是沒有靈性的做法。
所以我們?cè)撛趺崔k呢队询？其實(shí)核心代碼只有三行派桩，如下所示
.container {
overflow: hidden;
}
div.item {
padding-bottom: 500px;
margin-bottom: -500px;
}
設(shè)置完以上代碼，現(xiàn)在的情況就變成了這樣蚌斩。
下面來解釋它的工作原理铆惑，首先， padding-bottom: 500px 會(huì)讓三個(gè)盒子拉伸的非常高送膳，然后利用 margin-bottom: -500px 將各個(gè)元素切割掉 500px员魏，最后父元素將超出的部分隱藏，就出現(xiàn)了這個(gè)效果叠聋。
你可能對(duì)切割這個(gè)概念非常模糊撕阎，所以我推薦你去看以下文章，相信你看完之后就明白了晒奕。
《CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距》
《負(fù)值之美：負(fù)margin在頁面布局中的應(yīng)用》
利用 FlexBox
不得不說，上面的方法很好用名斟，不過我們還能夠更簡(jiǎn)潔一點(diǎn)脑慧，簡(jiǎn)潔的讓你不敢相信！其實(shí)砰盐，我們只需要為父布局設(shè)置一行 display: flex 就可以了闷袒！
而且，之前在沒有利用 flex 的時(shí)候岩梳，我們?yōu)榱俗屓齻€(gè)元素保持在同一行囊骤，還不得不為每個(gè) div.item 設(shè)置浮動(dòng)屬性。
那么為什么 display: flex 就可以完成以上那么多代碼才能夠完成的任務(wù)呢冀值？這依賴于 align-items 屬性也物，它的默認(rèn)值是 stretch，也就是在輔軸上將所有子項(xiàng)目拉伸為同一高度（或?qū)挾龋┮员３謱?duì)齊列疗。
如果你對(duì) flex 了解還不是很了解滑蚯，那么建議去閱讀以下文章。
