CSS：弹性布局（display:flex）

CSS的弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地处理容器内部元素的排列、对齐和分配空间。

以下是一个简单的弹性布局的例子：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* 设定为弹性布局 */
  flex-direction: row; /* 设定主轴方向为水平方向 */
  justify-content: space-around; /* 设定项目沿主轴分布的方式 */
  align-items: center; /* 设定项目沿交叉轴分布的方式 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

这段代码会创建一个高度为100px的容器，其中包含三个水平排列的项目，每个项目都有自己的背景色和文字，并且这三个项目会平均分布在容器中，两边有些距离。