【HTML+CSS】弹性盒子

弹性盒子（Flexible Box，Flexbox）是CSS3的一种布局模型，可以简便、灵活地实现各种页面布局。

以下是一个使用弹性盒子的简单示例：

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: #f0f0f0; /* 背景颜色 */
}
 
.flex-item {
  width: 100px; /* 项目宽度 */
  text-align: center; /* 文字居中 */
  line-height: 100px; /* 行高与容器高度相同，实现垂直居中 */
}

这个示例创建了一个水平方向上平均分布的弹性容器，其中包含三个等宽的子项。每个子项在水平方向上是等宽的，并且在垂直方向上通过行高与容器高度对齐，实现居中显示。