CSS3-flex布局 | 弹性盒模型

CSS3的弹性盒（Flexbox）布局提供了一种更简单的方式来设计灵活的布局，无论是列或行方向，并且可以轻易的调整其中元素的顺序、对齐和分配空间。

以下是一个使用CSS3 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: 200px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

这个例子中，.flex-container 类使用 display: flex 属性来指定这个div是一个弹性盒布局容器。flex-direction 属性设置为 row 表示主轴方向是水平的。justify-content 属性设置为 space-around 表示所有项目沿主轴均匀分布，两端保留空间。align-items 属性设置为 center 表示所有项目沿交叉轴线居中对齐。.flex-item 类则是对放在弹性盒内的项目进行样式设置。