CSS3 弹性盒子学习笔记

什么是弹性盒子？

CSS3 弹性盒子模型（Flexbox）是一种用于页面布局的新模式，能够更加有效地控制子元素在容器中的布局和排列方式。弹性盒子布局的核心思想是让容器有能力调整子元素的尺寸、位置和顺序，以适应不同的屏幕大小和设备类型。

如何创建一个弹性盒子？

首先，需要将容器设置为弹性盒子，这可以通过设置 display 属性来实现。例如，以下代码将创建一个带有弹性盒子布局的容器：

cssCopy Code
.container {
  display: flex;
}

接下来，您可以使用以下属性来控制弹性盒子的行为和外观：

flex-direction

该属性用于指定弹性盒子的主轴方向，可以设置为 row（水平方向）、column（垂直方向）、row-reverse（反转水平方向）或 column-reverse（反转垂直方向）。例如，以下代码将创建一个主轴方向为垂直方向的弹性盒子：

cssCopy Code
.container {
  display: flex;
  flex-direction: column;
}

justify-content

该属性用于指定沿着主轴方向如何分配弹性盒子的子元素之间的空间。可以设置为 flex-start（沿主轴起点对齐）、flex-end（沿主轴终点对齐）、center（居中对齐）、space-between（两端对齐，子元素之间均匀分布）或 space-around（子元素之间均匀分布，且各自周围留有一半的空间）。例如，以下代码将创建一个子元素居中对齐的弹性盒子：

cssCopy Code
.container {
  display: flex;
  justify-content: center;
}

align-items

该属性用于指定沿着弹性盒子的交叉轴方向如何对齐子元素。可以设置为 flex-start（沿交叉轴起点对齐）、flex-end（沿交叉轴终点对齐）、center（居中对齐）、baseline（沿着子元素的基线对齐）或 stretch（子元素拉伸以填满容器的高度）。例如，以下代码将创建一个子元素沿交叉轴方向居中对齐的弹性盒子：

cssCopy Code
.container {
  display: flex;
  align-items: center;
}

flex-wrap

该属性用于指定如何换行子元素，可以设置为 nowrap（不换行，所有元素在同一行上）、wrap（按照先左后右、先上后下的顺序换行，也就是向下移动到下一行）或 wrap-reverse（与 wrap 相反）。例如，以下代码将创建一个弹性盒子，在窄屏幕上，子元素将垂直排列，在宽屏幕上，子元素将水平排列：

cssCopy Code
.container {
  display: flex;
  flex-wrap: wrap;
}

实例演示

以下是一个简单的实例，展示了如何在弹性盒子模型中使用上述属性来设置布局：

cssCopy Code
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

htmlCopy Code
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

以上代码将创建一个主轴方向为垂直方向、交叉轴方向居中对齐的弹性盒子，其中包含三个大小相等、带有蓝色背景的子元素，子元素之间有 10 像素的间距。