CSS橫向不規則布局可以為網站設計增加活力和美感。本文將介紹如何使用CSS實現橫向不規則布局。

.container{
display:flex;
flex-wrap:wrap;
}
.item{
width:200px;
height:200px;
margin:10px;
background-color: #ccc;
border-radius:50% 20% 50% 50%;
}

上述代碼展示了如何使用flex布局實現多個元素橫向排列，并對元素樣式進行設置，實現不規則布局。其中，.container表示容器元素，使用flex布局排列子元素；.item表示子元素，設置其寬度、高度、邊距和背景顏色，添加border-radius屬性實現不規則布局。

接下來，我們將演示如何將橫向不規則布局與響應式布局相結合。

@media screen and (max-width:768px){
.container{
flex-direction:column;
}
}

上述代碼表示當屏幕寬度小于等于768px時，將flex-direction設置為column，實現布局變為豎向排列。

通過以上代碼，我們可以輕松實現CSS橫向不規則布局，并與響應式布局相結合，為網站設計增加更多的亮點。希望本文對您有所幫助。