CSS:弹性盒子Flexible Box布局

在CSS中，弹性盒子（Flexible Box，Flexbox）是一种现代化的布局模型，用于更简单、更灵活的方式排列容器内的项目。

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

HTML:

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

CSS:

.container {
  display: flex; /* 指定为弹性盒子布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 设置项目之间的间隔 */
}
 
.item {
  width: 100px; /* 设置项目宽度 */
  height: 100px; /* 设置项目高度 */
  background-color: skyblue; /* 设置背景颜色 */
  display: flex; /* 内部使用弹性盒子布局 */
  justify-content: center; /* X轴对齐方式 */
  align-items: center; /* Y轴对齐方式 */
}

这个例子中，.container 类使用 display: flex 将其设置为弹性盒子布局，.item 类则用于定义每个子项的样式。弹性盒子提供了很多属性来控制布局，如 flex-direction 控制项目的排列方向，justify-content 控制项目在主轴上的对齐方式，align-items 控制项目在交叉轴上的对齐方式等。