CSS3 弹性盒子（Flexbox）是一种布局模型，它允许在容器内的元素之间进行动态布局，并能轻松地控制元素的对齐、方向、大小和顺序。Flexbox 是响应式设计中常用的布局方式，它比传统的布局方法（如浮动和定位）更加简洁和灵活。

1. Flexbox 基本概念

• 容器 (Flex Container)：Flexbox 的基础是一个容器，通过设置 display: flex 或 display: inline-flex 来创建。
• 项 (Flex Items)：容器中的直接子元素是 flex 项。

示例：设置 Flexbox 容器

.container {
  display: flex;
}

2. 方向控制 (flex-direction)

flex-direction 属性定义了主轴的方向，从而控制 flex 项的排列方向。可选值包括：

• row：默认值，沿主轴（水平方向）排列。
• column：沿主轴（垂直方向）排列。
• row-reverse：与 row 相反，反向排列。
• column-reverse：与 column 相反，反向排列。

示例：控制排列方向

.container {
  display: flex;
  flex-direction: row; /* 水平方向排列 */
}

.container.column {
  flex-direction: column; /* 垂直方向排列 */
}

3. 换行 (flex-wrap)

flex-wrap 属性控制 Flex 容器是否允许换行。如果容器的宽度不足以容纳所有项时，默认情况下项会在一行内显示。使用 flex-wrap 可以允许项换行。

• nowrap：默认值，不换行。
• wrap：换行，允许项换到下一行。
• wrap-reverse：换行并反向排列项。

示例：允许换行

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

4. 对齐项目 (justify-content)

justify-content 用于控制 flex 项沿主轴（行方向）的对齐方式，常见的值有：

• flex-start：默认值，项目在容器的起始位置对齐。
• flex-end：项目在容器的结束位置对齐。
• center：项目在容器内居中对齐。
• space-between：项目之间有均等的空间，首尾无空隙。
• space-around：项目之间有均等的空间，首尾有一半的空隙。

示例：水平居中对齐项目

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

5. 垂直对齐 (align-items)

align-items 用于控制 flex 项沿交叉轴（垂直方向）的对齐方式，常见的值有：

• stretch：默认值，项目拉伸填充容器。
• flex-start：项目与容器的顶部对齐。
• flex-end：项目与容器的底部对齐。
• center：项目垂直居中对齐。
• baseline：项目的基线对齐。

示例：垂直居中对齐项目

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

6. 单个项目的对齐 (align-self)

align-self 用于控制单个 flex 项在交叉轴上的对齐方式。它的值可以是：

• auto：默认值，继承自 align-items 的值。
• flex-start、flex-end、center、stretch、baseline（与 align-items 相同）。

示例：单独设置一个项目的对齐方式

.item {
  align-self: flex-end; /* 让该项与容器底部对齐 */
}

7. 弹性项目的伸缩 (flex-grow, flex-shrink, flex-basis)

• flex-grow：指定项目的放大比例，默认为 0，即如果有剩余空间，项目不会放大。
• flex-shrink：指定项目的缩小比例，默认为 1，即如果空间不足，项目会缩小。
• flex-basis：指定项目的初始大小，默认为 auto，即根据项目内容决定大小。

示例：设置弹性伸缩

.item {
  flex-grow: 1; /* 项目占据剩余空间 */
  flex-shrink: 1; /* 项目缩小时按比例缩小 */
  flex-basis: 100px; /* 初始大小为100px */
}

8. 简写属性 (flex)

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。格式为：

flex: <flex-grow> <flex-shrink> <flex-basis>;

示例：使用简写属性

.item {
  flex: 1 1 100px; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}

9. 排序 (order)

order 属性控制项目的顺序。默认情况下，所有项的 order 值为 0。通过设置不同的 order 值，可以改变项目的显示顺序。

示例：更改项目顺序

.item1 {
  order: 2; /* 排在第三位 */
}

.item2 {
  order: 1; /* 排在第二位 */
}

.item3 {
  order: 0; /* 排在第一位 */
}

10. Flexbox 布局的实用示例

示例：水平居中的 Flexbox 布局

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

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.item {
  margin: 10px;
  padding: 20px;
  background-color: #3498db;
  color: white;
}

在这个例子中，三个项会被水平和垂直居中对齐。

总结

Flexbox 布局为网页设计提供了强大而灵活的工具，它使得元素的对齐、分布和尺寸控制变得非常简单。掌握了 Flexbox 的基本属性，你就能够轻松地实现各种响应式、动态布局。通过组合 flex-direction、justify-content、align-items、flex-grow 等属性，你可以为页面中的元素创建各种复杂的布局结构。