最近，六邊形瀑布流在網(wǎng)頁設(shè)計(jì)中越來越常見。這種布局特別適合展示圖片或產(chǎn)品，讓頁面看起來更加有趣和生動(dòng)。而使用 CSS3 制作這樣的布局，代碼也非常簡(jiǎn)單和靈活。

.hexagon{
position: relative;
width: 33.33%;
margin: 0 auto;
padding-bottom: 38.29%;
overflow: hidden;
float: left;
}
.hexagon:before {
content: "";
position: absolute;
z-index: -1;
top: 0; 
right: 0;
bottom: 0; 
left: 0;
background-color: #fff;
transform: rotate(60deg);
transform-origin: bottom left;
}
.hexagon:after {
content: "";
position: absolute;
z-index: -1;
top: 0; 
right: 0;
bottom: 0; 
left: 0;
background-color: #fff;
transform: rotate(-60deg);
transform-origin: bottom right;
}
.img-wrapper{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-wrapper img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如上代碼所示，在 HTML 中我們需要?jiǎng)?chuàng)建一個(gè)容器元素，然后利用 CSS3 的偽元素創(chuàng)建六邊形框，以及內(nèi)部的圖片容器和圖片元素。利用 flexbox 可以很方便地進(jìn)行排列和布局。

為了實(shí)現(xiàn)瀑布流布局的效果，我們可以將不同大小的六邊形容器推入同一個(gè) flexbox 容器，從而實(shí)現(xiàn)圖片隨機(jī)排列的效果。這樣的布局不僅美觀，而且響應(yīng)式，適用于不同的設(shè)備和屏幕大小。

總體來說，利用 CSS3 制作六邊形瀑布流布局是一種很有趣和實(shí)用的技術(shù)，可以讓你的網(wǎng)站更加吸引人和生動(dòng)。如果你還沒有嘗試過，不妨挑戰(zhàn)一下，或許你會(huì)有意想不到的表現(xiàn)和收獲。