CSS3伸縮欄是CSS3的一個(gè)非常實(shí)用的特性，可以讓網(wǎng)頁設(shè)計(jì)師輕松地創(chuàng)建出有著現(xiàn)代感和優(yōu)美的效果的頁面。

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

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

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