CSS雙行顯示菜單可以讓我們在頁面上展示更多的內(nèi)容，提高頁面的信息密度。下面我們來看一下實(shí)現(xiàn)這個(gè)效果的方法。

.nav {
display: flex;
flex-wrap: wrap;
}
.nav >li {
flex: 1;
}
@media screen and (max-width: 768px) {
.nav >li {
flex-basis: 50%;
}
}

首先，我們需要將導(dǎo)航菜單所在的容器設(shè)置為 flex 布局，并設(shè)置其 flex-wrap 屬性為 wrap，這樣子元素就可以自動(dòng)換行了。

接下來，我們需要給每一個(gè)導(dǎo)航菜單項(xiàng)設(shè)置 flex 屬性為 1，這樣菜單項(xiàng)就可以均分容器的寬度，實(shí)現(xiàn)雙行顯示。

最后，我們利用 @media 查詢，給小屏幕設(shè)備設(shè)置 .nav >li 的 flex-basis 屬性為 50%。這樣在小屏幕設(shè)備上，每一行只會(huì)顯示兩個(gè)菜單項(xiàng)。

通過以上代碼的設(shè)置，我們就可以實(shí)現(xiàn) CSS 雙行顯示菜單的效果了。如果你也想在你的網(wǎng)站上使用這個(gè)效果，只需要將以上代碼復(fù)制到你的 CSS 文件中即可。