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 */
}

除了以上常见用法外，弹性布局还有许多其他的高级用法，比如弹性容器的嵌套、基于网格的布局、伸缩性控制等。总之，掌握弹性布局不仅可以提高页面布局的效率，还可以让开发者在响应式设计方面更加得心应手。