CSS彈性布局是一種基于CSS3的新型布局模式，它可以幫助我們在HTML中輕松地構建一些靈活且響應式的布局效果。它的原理是通過彈性盒子（Flexbox）來控制盒子元素的排列、尺寸和對齊方式。相比于傳統的布局方式，CSS彈性布局具有更好的適應性和可擴展性。

.container {
display: flex; 
/* 將容器設置為flex布局 */
flex-direction: row; 
/* 設置子元素在水平方向上排列 */
justify-content: center; 
/* 設置子元素在水平方向上居中對齊 */
align-items: center; 
/* 設置子元素在垂直方向上居中對齊 */
}
.item {
flex: 1; 
/* 將子元素設置為彈性盒子，盡可能占據剩余空間 */
margin: 10px; 
/* 設置子元素之間的間距 */
text-align: center; 
/* 設置子元素內部文本居中 */
}

在以上代碼中，我們使用了flex屬性將一個元素設置為彈性盒子，它的取值可以是數字，表示占據的空間比例。我們還可以使用其他的屬性來控制盒子元素的排列方向、對齊方式、順序等。

除了可以用于布局外，CSS彈性布局還可以用來實現一些動畫效果、導航菜單等。它的應用范圍非常廣泛，是現代Web開發中不可或缺的一部分。