CSS 三欄自適應布局是常用的一種頁面布局方式。在這種布局方式中，網頁分為左、中、右三個部分，分別放置不同的內容。使用 CSS 可以實現這種布局方式的自適應，讓頁面在不同的設備上都能夠顯示得合理美觀。

在實現 CSS 三欄自適應布局時，需要用到

flex

布局。以下是實現這種布局的代碼：

.container {
display: flex;
flex-wrap: wrap;
}
.left {
width: 20%;
order: 1;
}
.right {
width: 20%;
order: 3;
}
.main {
width: 60%;
order: 2;
}

以上代碼中，首先將 .container 設置為

flex

布局，然后使用

width

屬性設置左、中、右三個部分的寬度，再使用

order

屬性控制它們在頁面中的顯示順序。

在實現這種布局時，還需要注意一些細節。例如在設置左、中、右三個部分的寬度時，要注意它們的

box-sizing

屬性的取值。如果取值為

content-box

，那么設置的寬度就不包括內邊距和邊框，這樣布局時就會發生一些意想不到的問題。

除此之外，還需要為這三個部分設置一些基本的樣式，例如背景色、邊框、內邊距等。這樣，就能夠得到一個完整的、兼容各種設備的三欄自適應布局。