flexbox 嵌套

Begindev 编辑部 March 25, 2026

嵌套 Flexbox 容器是创建复杂且高度灵活布局的核心技术。

它允许你在 HTML 结构的不同层级中，组合使用 Flexbox 的布局能力，从而对元素内部的子元素实现极其精细的定位和对齐控制。只要掌握了嵌套技巧，你就能构建出完美适应各种屏幕尺寸和设备的精美页面结构。

1. 理解嵌套 Flexbox

嵌套 Flexbox 的本质非常简单：让一个弹性项目本身，也变成一个弹性容器。

这意味着，一个弹性容器的直接子元素，可以同时作为它自己子元素的弹性容器。这种机制构建了一个层级化的布局结构。外层容器负责控制其直接子元素的宏观排版，而内层容器则独立负责其内部小元素的微观排版。

2. 嵌套的三大核心原则

父子关系 (Parent-Child Relationship): 嵌套 Flexbox 的关键在于 HTML 元素之间的严格父子关系。父元素变为弹性容器，其直接子元素变为弹性项目。这些弹性项目中的任何一个，都可以通过设置 display: flex 再次成为新的父容器。
独立控制 (Independent Control): 每个弹性容器都在独立地控制它自己的直接子元素。你修改外层容器的对齐属性，不会自动影响到内层容器里元素的排列（尽管外层容器的尺寸变化会影响内层容器的可用空间）。
继承限制 (Inheritance Limited): Flexbox 的布局属性默认是不继承的。你必须在你希望作为容器的每一个 HTML 元素上，明确地声明 display: flex（或 inline-flex）。像字体大小 (font-size) 或颜色 (color) 这样的常规属性会正常继承，但 Flexbox 专属的排版规则不会。

3. 示例 1：基础的嵌套结构

让我们来看一个最基础的嵌套例子。

<div class="outer-container">
  <div class="item item-1">项目 1</div>
  <div class="item item-2">项目 2
    <div class="inner-container">
      <div class="inner-item">内层项目 1</div>
      <div class="inner-item">内层项目 2</div>
    </div>
  </div>
  <div class="item item-3">项目 3</div>
</div>

.outer-container {
  display: flex;
  background-color: #eee;
  padding: 20px;
  gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

.inner-container {
  display: flex; /* 关键：让内部的 div 也成为弹性容器 */
  flex-direction: column; /* 让内层项目垂直堆叠 */
  background-color: #ccc;
  margin-top: 10px;
}

.inner-item {
  background-color: #bbb;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

代码解析：

.outer-container 是外层弹性容器，它将自己的孩子（.item）水平排列（默认的 row 方向）。
.item-2 是一个普通的弹性项目，但它内部包含了一个 .inner-container。
.inner-container 也是一个弹性容器，因为它声明了 display: flex。它使用 flex-direction: column 将自己的孩子（.inner-item）垂直排列。如果没有这句 display: flex，里面的元素就不会遵循弹性布局规则。

4. 示例 2：在不同层级控制对齐方式

嵌套的强大之处在于你可以针对每一层设置完全不同的对齐策略。

<div class="outer-container">
  <div class="item">项目 1</div>
  <div class="item">项目 2
    <div class="inner-container">
      <div class="inner-item">内层项目 1</div>
      <div class="inner-item">内层项目 2</div>
    </div>
  </div>
  <div class="item">项目 3</div>
</div>

.outer-container {
  display: flex;
  justify-content: space-around; /* 均匀分布外层项目 */
  align-items: center; /* 外层项目垂直居中 */
  background-color: #eee;
  padding: 20px;
  height: 200px; /* 给外层容器一个固定高度 */
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

.inner-container {
  display: flex;
  justify-content: center; /* 在内层容器中水平居中项目 */
  align-items: flex-end; /* 让内层项目对齐到底部 */
  flex-direction: column;
  background-color: #ccc;
  height: 100px; /* 给内层容器一个高度以观察底部对齐效果 */
}

.inner-item {
  background-color: #bbb;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

代码解析：

外层 .outer-container 使用 justify-content: space-around 在主轴上均匀散开三个 .item，并用 align-items: center 让他们整体垂直居中。
内层 .inner-container 使用 justify-content: center 让内部元素在垂直方向（此时为主轴）居中，并用 align-items: flex-end 将它们强制对齐到内层容器的底部右侧（因为是列布局，交叉轴变成了水平方向）。

5. 示例 3：在嵌套容器中使用 flex-grow

结合前面学过的空间分配属性，嵌套布局能实现极具弹性的自适应效果。

<div class="outer-container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">
    <div class="inner-container">
      <div class="inner-item">项目 1</div>
      <div class="inner-item">项目 2</div>
      <div class="inner-item">项目 3</div>
    </div>
  </div>
</div>

.outer-container {
  display: flex;
  height: 300px;
}

.sidebar {
  background-color: #ddd;
  width: 200px;
}

.main-content {
  background-color: #eee;
  flex-grow: 1; /* 允许主内容区占据所有剩余空间 */
  display: flex; /* 让主内容区也变成弹性容器 */
}

.inner-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #ccc;
  flex-grow: 1; /* 关键：允许内层容器在主内容区内继续膨胀填满 */
}

.inner-item {
  background-color: #bbb;
  padding: 10px;
  text-align: center;
  width: 80%;
}

代码解析：

.outer-container 创建了一个经典的两列布局：左侧固定宽度的侧边栏，右侧是主内容区。
.main-content 作为一个外层弹性项目，利用 flex-grow: 1 霸占了右侧全部剩余宽度。同时，它本身通过 display: flex 成为了内层容器的父亲。
.inner-container 嵌套在主内容区中。给它也加上 flex-grow: 1 极其重要，这使得它能垂直方向拉伸填满整个 .main-content 区域，而不是仅仅包裹住内部文字的高度。随后，它再通过 flex-direction: column 和 justify-content: space-around优雅地排列最内部的三个盒子。