CSS彈性布局是一種新式的網頁布局方法，它允許網頁內容適應不同的屏幕大小和設備類型。它可以非常靈活地自適應網頁的寬度和高度。

CSS彈性布局的主要元素是彈性容器和彈性項目。一個彈性容器可以包含多個彈性項目，這些彈性項目可以根據需要自動調整其尺寸和位置。彈性容器的屬性有display:flex，flex-direction，justify-content，align-items等，用于控制彈性項目的排列。彈性項目的屬性有flex-grow，flex-shrink，flex-basis等，用于控制彈性項目的尺寸。

.flex-container {
display: flex;  /* 定義為彈性容器 */
flex-direction: row;  /* 從左至右排列 */
justify-content: space-between;  /* 彈性項目間間隔相等 */
align-items: center;  /* 彈性項目相對容器垂直居中 */
}
.flex-item {
flex-grow: 1;  /* 彈性項目伸展能力 */
flex-shrink: 1;  /* 彈性項目收縮能力 */
flex-basis: 0;  /* 彈性項目基本尺寸 */
text-align: center;  /* 彈性項目文字居中 */
}

彈性布局的優點是適應性好，能夠輕松實現自適應；開發效率高，代碼量少，易于維護；匯總容易，對于網站制作者來說，布局更加容易并且精確。因此，CSS彈性布局越來越受到開發者的追捧，成為了現代Web開發的熱門技術。