CSS3伸縮布局是一種靈活的網(wǎng)頁(yè)設(shè)計(jì)方式。它使用了新的CSS3屬性，可以讓開發(fā)者很容易地控制元素的大小和位置，從而實(shí)現(xiàn)網(wǎng)頁(yè)的自適應(yīng)和響應(yīng)式布局。

CSS3伸縮布局的核心在于flexbox（彈性盒子）模型。通過(guò)定義“容器”和“項(xiàng)目”，并應(yīng)用不同的flexbox屬性，可以創(chuàng)建出各種不同的布局。在以下示例中，我們將演示如何使用flexbox屬性來(lái)控制一個(gè)簡(jiǎn)單的導(dǎo)航欄的樣式。

.nav-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-item {
flex-grow: 1;
flex-basis: 0;
text-align: center;
}

在上面的代碼中，我們定義了一個(gè).nav-container容器，并將其display屬性設(shè)置為flex，以啟用彈性盒子模型。我們還使用了justify-content屬性，將子元素（即導(dǎo)航欄項(xiàng)目）之間的空間均分到容器的兩側(cè)，從而實(shí)現(xiàn)了等距離分布的效果。而align-items屬性則是將子元素垂直居中對(duì)齊。

接下來(lái)，我們?yōu)槊總€(gè).nav-item元素定義了flex-grow和flex-basis屬性。其中，flex-grow屬性表示元素在容器中占據(jù)的比例，而flex-basis屬性則是定義元素在水平方向上的基礎(chǔ)大小。通過(guò)這兩個(gè)屬性的結(jié)合，我們可以實(shí)現(xiàn)了等寬的導(dǎo)航欄項(xiàng)目。最后，我們通過(guò)text-align屬性水平居中元素的文本內(nèi)容。

通過(guò)使用CSS3伸縮布局，我們可以輕松實(shí)現(xiàn)許多復(fù)雜的布局效果，如響應(yīng)式導(dǎo)航欄、網(wǎng)格布局、圣杯布局等。這種布局方式已經(jīng)成為了現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)配，它可以讓我們快速構(gòu)建出符合用戶和設(shè)備需求的高質(zhì)量網(wǎng)頁(yè)。