Web前端-Web开发CSS基础6-弹性盒子

在CSS中，弹性盒子（Flexible Box，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 {
  width: 100px; /* 项目宽度 */
  text-align: center; /* 文字居中 */
  background-color: coral; /* 背景颜色 */
}

这个例子中，.flex-container 类使用 display: flex 属性使得其子元素 .flex-item 变为弹性盒子项目。flex-direction 属性设置了主轴的方向（这里是水平方向），justify-content 属性定义了主轴方向上的对齐方式（这里是平分空间），align-items 属性定义了交叉轴方向上的对齐方式（这里是居中对齐）。