網頁設計中的三欄式常常被用于布局，其中 CSS 是關鍵性語言之一。每個網頁設計師都必須了解如何基于 CSS 實現三欄式網頁布局。

三欄式網頁布局的三個主要部分為“側欄”、“主體”和“側欄”。它們的大小、位置和樣式根據設計需求而定。 三欄式布局的一個優點是可以在頁面上容納更多的內容。

.container {
display: flex;
}
.sidebar-left,
.sidebar-right,
.main-content {
height: 300px;
padding: 20px;
}
.sidebar-left,
.sidebar-right {
flex: 1;
background-color: #f2f2f2;
}
.main-content {
flex: 3;
background-color: #ffffff;
}

上面的代碼展示了如何使用 CSS 來創建一個簡單的三欄式布局。它使用彈性盒模型布局（“flex”），其中容器通過“display: flex”被轉換成彈性容器。

三個主要的部分用類表示，并具有相應的樣式。側欄在代碼中分別為“sidebar-left”和“sidebar-right”，共享樣式，單獨設置背景顏色。主內容為“main-content”，占用更多空間并使用不同背景顏色。

三個部分共享相同的高度，因為我們需要它們對齊。通過使用“padding: 20px”，我們可以為每個部分添加內邊距以提高空間的易讀性。

使用 CSS 和彈性盒模型布局，創建三欄式布局變得非常容易。這是一種靈活的解決方案，可以根據需要添加更多的邊欄或主體，從而滿足不同的設計需求。