CSS3橫向瀑布流是一種流行的布局方式，它允許你創(chuàng)建一個(gè)具有類似瀑布一樣的響應(yīng)式導(dǎo)航系統(tǒng)。下面是一些CSS代碼，用于創(chuàng)建CSS3橫向瀑布流：

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc((100% - 30px) / 3);
margin-bottom: 20px;
vertical-align: top;
}
.item img {
max-width: 100%;
height: auto;
}

首先，我們創(chuàng)建一個(gè)容器并將其設(shè)置為Flex布局。然后，我們?cè)O(shè)置Flex容器的“flex-wrap”屬性為“wrap”，以允許元素在需要時(shí)換行。接下來(lái)，我們使用“justify-content”屬性將元素對(duì)齊到容器的左側(cè)和右側(cè)。

對(duì)于每個(gè)項(xiàng)目，我們?cè)O(shè)置寬度為“calc((100% - 30px) / 3)”來(lái)確保它們等寬且適合其父容器。我們還設(shè)置頂部和底部邊距為“20px”，以便在項(xiàng)目之間留出空白區(qū)域。最后，我們將圖像的最大寬度設(shè)置為100%，以確保它們適合其容器。

通過(guò)這些CSS規(guī)則，我們可以創(chuàng)建出一個(gè)漂亮的橫向瀑布流布局，為我們的網(wǎng)站提供一種獨(dú)特而時(shí)尚的導(dǎo)航方式。