CSS是前端開發中非常重要的一項技術，它可以讓我們輕松地實現網頁元素的樣式設計，其中布局是最為基礎和重要的內容。下面我們講述如何用css實現橫向布局。

// HTML代碼
<div class="container">
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
// CSS代碼
.container {
display: flex;  // 設置為flex布局
}
.left {
flex-grow: 1;  // 設置左邊元素占據剩余空間的1/3
background-color: yellow;
}
.right {
flex-grow: 2;  // 設置右邊元素占據剩余空間的2/3
background-color: green;
}

以上代碼實現了一個簡單的橫向布局，其中使用了flex布局。在容器元素上設置了display屬性為flex，這樣就可以啟用flex布局。左邊和右邊元素分別占據了剩余空間的1/3和2/3，通過設置flex-grow屬性實現。此外，還可以使用flex-shrink控制元素在空間不足時的縮放比例，使用flex-basis控制元素的起始大小。