CSS3伸縮欄是CSS3的一個非常實用的特性，可以讓網頁設計師輕松地創建出有著現代感和優美的效果的頁面。

/* CSS3伸縮欄代碼 */
.container {
display: flex; /* 啟用伸縮布局 */
flex-wrap: wrap; /* 讓子元素換行 */
}
.sub-container {
flex: 1; /* 子元素占據可用空間的比例 */
margin: 10px; /* 制造子元素之間的邊距 */
}
.sub-container:nth-child(1) {
background-color: #f29898; /* 設置第一個子元素的背景顏色 */
}
.sub-container:nth-child(2) {
background-color: #f2c17e; /* 設置第二個子元素的背景顏色 */
}
.sub-container:nth-child(3) {
background-color: #9ed9f2; /* 設置第三個子元素的背景顏色 */
}

使用上述代碼，可以創建出一個具有三個伸縮欄的布局。父容器使用了display: flex;來啟用伸縮布局，并使用flex-wrap: wrap;讓子元素可以自動換行。這樣一來，無論屏幕的尺寸如何，子元素都不會疊在一起。

每個子元素使用了flex: 1;來讓它們占據可用空間的比例，這意味著當屏幕空間有所變化時，子元素的寬度也會隨之變化。通過為每個子元素設置不同的background-color屬性可以讓它們有不同的顏色，從而增強頁面的可視性。