CSS中的彈性布局（Flexbox）是一種現代化的布局方式，它可以讓開發者更加輕松地實現自適應布局，以及快速、靈活地布局頁面內容。下面我們來介紹一下彈性布局的使用方法和常見用法。

/* 首先，我們需要在容器上應用flex布局 */
.container {
display: flex;
}
/* 使用flex-direction屬性設置主軸方向 */
.container {
flex-direction: row; /* 水平方向 */
flex-direction: column; /* 垂直方向 */
flex-direction: row-reverse; /* 水平逆向 */
flex-direction: column-reverse; /* 垂直逆向 */
}
/* 使用justify-content屬性設置主軸對齊方式 */
.container {
justify-content: flex-start; /* 起始對齊 */
justify-content: flex-end; /* 結束對齊 */
justify-content: center; /* 居中對齊 */
justify-content: space-between; /* 兩端對齊 */
justify-content: space-around; /* 均勻分配 */
}
/* 使用align-items屬性設置交叉軸對齊方式 */
.container {
align-items: flex-start; /* 起始對齊 */
align-items: flex-end; /* 結束對齊 */
align-items: center; /* 居中對齊 */
align-items: stretch; /* 伸展填充 */
}
/* 使用flex屬性設置子元素的伸縮性 */
.item {
flex: 1; /* 拉伸，占據剩余空間 */
flex: none; /* 不拉伸，僅占據本身空間 */
flex:; /* 指定拉伸比例，如2、3 */
}
/* 使用order屬性設置子元素的排列順序 */
.item1 {
order: 1; /* 排列順序為1 */
}
.item2 {
order: 2; /* 排列順序為2 */
}

除了以上常見用法外，彈性布局還有許多其他的高級用法，比如彈性容器的嵌套、基于網格的布局、伸縮性控制等。總之，掌握彈性布局不僅可以提高頁面布局的效率，還可以讓開發者在響應式設計方面更加得心應手。