CSS（Cascading Style Sheets）是前端開發(fā)中的一項基礎技能，在網頁的美化方面發(fā)揮重要的作用。伸縮布局（flexbox）則是CSS3提出的一種新的布局方式，可以高效地實現(xiàn)各種頁面布局。 在實現(xiàn)伸縮布局前，需要將元素的display屬性設置為flex，這樣子元素便會按照一定的規(guī)則，自動進行排列和布局。 例如，下面的代碼塊實現(xiàn)了一個水平居中的布局：

.container {
display: flex;
justify-content: center;
align-items: center;
}

以上代碼中，.container代表容器元素，display:flex表示該容器使用的是伸縮布局。justify-content和align-items分別代表容器中內部元素的水平和垂直排列方式，可以設置的值有flex-start、center、flex-end等。 除此之外，伸縮布局還支持自適應寬度和高度、元素的排序等等一系列強大的功能。例如，下面的代碼實現(xiàn)了flex布局下的3列寬度自適應的效果。

.container {
display: flex;
}
.col {
flex: 1;
}

在以上代碼中，.col代表內部子元素，flex:1表示子元素要占據(jù)相同的寬度空間。這樣一來，無論有多少個子元素，它們都會按照相同的寬度自適應排列。 總之，伸縮布局已經成為了前端開發(fā)中必不可少的一項技能。它具有很強的適應性和靈活性，在實現(xiàn)各種布局和效果上都可以發(fā)揮出很大的作用。因此掌握好這一技能，不僅可以提升自己的前端開發(fā)水平，還可以使網頁更加美觀、實用。