在網頁設計中， CSS 彈性布局是一個非常常用的布局方式。它的主要作用就是在網頁中創建一個可以自動適應屏幕大小的布局。在 CSS 彈性布局中，橫向布局也是非常常用的一種，下面就來介紹一下 CSS 彈性布局橫向布局的代碼。

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
flex-basis: 30%;
margin-bottom: 20px;
}

上面的代碼中，我們創建了一個名為 .container 的容器，并設置了它的 display 為 flex，這是 CSS 彈性布局的基礎。同時，我們還設置了容器的 flex-wrap 屬性為 wrap，這樣可以使容器內的元素自動換行。

接下來，我們設置了容器的 justify-content 屬性為 space-between，這會使元素在容器內橫向分布，并且以空格的形式在元素之間間隔相等。同時，我們還設置了容器的 align-items 屬性為 center，這可以使容器內的所有元素在容器內垂直居中對齊。

最后，我們設置了容器內元素的 flex-basis 屬性為 30%。這個屬性表示元素的基本寬度為容器的 30%，同時元素的 margin-bottom 屬性為 20px，這可以使元素之間有 20px 的間隔。

以上就是 CSS 彈性布局橫向布局的代碼，通過使用這些代碼，我們可以非常方便地在網頁中創建一個自動適應屏幕大小的布局了。