CSS三欄自適應布局是前端開發中比較常見的一種布局方案，它可以實現左邊、中間、右邊三個區域的自適應排列，根據瀏覽器的大小自動調整布局。下面我們來看一下具體實現方式。

<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
}
.left, .right {
width: 200px;
height: 500px;
background: #ccc;
}
.middle {
flex: 1;
height: 500px;
background: #eee;
}
</style>

首先我們需要在HTML中定義一個容器div，再在其內部定義三個子元素分別作為左邊、中間、右邊的內容區域。然后我們使用CSS中的flex布局方式來實現三個子元素的自適應排列。容器的display屬性設置為flex，表示子元素按照flex布局排列。

左邊、右邊的內容區域使用固定寬度，中間的內容區域使用flex屬性來占滿剩余的寬度。為了實現三個子元素的相同高度，我們需要將左邊、右邊、中間的高度設置為相同的值。

通過這樣的設置，左邊、中間、右邊三個區域的寬度將會根據瀏覽器的大小自動調整，實現了三欄自適應布局。