CSS3弹性布局Flex

CSS3弹性布局（Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单。Flexbox可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是一个简单的Flexbox布局示例：

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; /* 字体大小 */
}

这个例子中，.flex-container 类使用 display: flex 属性启用Flexbox布局。flex-direction 属性设置为 row 表示子项沿着水平方向排列。justify-content 属性设置为 space-around 表示子项在水平方向上分散对齐，align-items 属性设置为 center 表示子项在垂直方向上居中对齐。