Flexbox：弹性容器 (Flex Container) 与弹性项目 (Flex Items)

Begindev 编辑部 March 25, 2026

欢迎来到现代教程的 Flexbox 学习之旅。让我们从最基础的核心概念开始：弹性容器 (flex container) 和 弹性项目 (flex items)。

它们是构建任何 Flexbox 布局的基础。就像你在之前的模块中学习 HTML 基础结构和元素定位一样，现在我们将学习如何组织 HTML 结构，从而发挥 Flexbox 的强大威力。

1. 创建弹性容器

要使用 Flexbox，你首先需要定义一个弹性容器 (flex container)。只需将 HTML 元素的 display 属性设置为 flex 或 inline-flex 即可。

display: flex;：将元素变为一个块级 (block-level) 弹性容器。它的行为类似 <div>，会占据所有可用宽度，并从新的一行开始显示。
display: inline-flex;：将元素变为一个行内 (inline-level) 弹性容器。它的行为类似 <span>，宽度仅由其内容决定，并会与周围的文本在同一行流动。

基础示例：

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

.container {
  display: flex; /* 或者使用 display: inline-flex; */
  background-color: #f0f0f0;
  padding: 20px;
}

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

在这个例子中，带有 container 类的 div 就是弹性容器。而内部带有 item 类的 div 元素就是它的弹性项目。

2. 弹性容器 vs. 块级/行内元素

理解弹性容器与普通块级 (block) 或行内 (inline) 元素的区别至关重要。当你给一个元素应用 display: flex 时：

该元素的直接子元素在布局上会失去它们原本的块级或行内特性。它们变身为了弹性项目，完全按照 Flexbox 的规则进行排列。
弹性容器本身，相对于它的父元素，依然保持块级（如果是 flex）或行内（如果是 inline-flex）元素的行为。

代码演示：

<div>
  <p>弹性容器前面的一些文本。</p>
  
  <div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
  </div>
  
  <p>弹性容器后面的一些文本。</p>
</div>

原理解析：

如果 .container 设置为 display: flex：外层的 <p> 元素会把 .container 当作一个普通的块级元素对待，各自独占一行。而容器内部的“项目 1”和“项目 2”则遵循 Flexbox 规则排列。
如果 .container 设置为 display: inline-flex：外层的 <p> 元素依然是块级元素。但 .container 自身会被视为行内元素。如果有足够的空间，它甚至能和周围 <p> 标签里的文本排在同一行，同时其内部的“项目 1”和“项目 2”依然遵循 Flexbox 规则排列。

3. 深入理解弹性项目 (Flex Items)

弹性项目是弹性容器的直接子元素。它们沿着主轴 (main axis) 和 交叉轴 (cross axis) 进行排列（我们将在下一节学习 flex-direction 时详细探讨双轴概念）。

目前，你需要了解弹性项目具备以下几个基本特性：

排列方向 (Flow Direction)：默认情况下，弹性项目排成一行（水平方向）。你可以使用 flex-direction 属性来改变这个方向。
基于内容的尺寸 (Content-Based Sizing)：弹性项目最初会根据其内部内容的大小来决定自身尺寸。随后，你可以使用 flex-grow、flex-shrink 和 flex-basis 等属性，精确控制它们在容器中如何放大或缩小。
Margin Auto 的空间吸收魔法：在 Flexbox 中，margin: auto 拥有特殊的魔力。它可以吸收特定方向上的所有剩余空间，常用于将项目推向容器边缘，或在项目之间创建相等的间距。
层级控制 (Z-Index)：默认情况下，弹性项目按照 HTML 源码中的顺序渲染（除非使用了高级属性 order）。它们和定位元素一样，完全支持 z-index 属性来控制堆叠层级。

3.1 简单示例：Margin Auto 的运用

<div class="container">
  <div class="item">项目 1</div>
  <div class="item" style="margin-left: auto;">项目 2</div>
</div>

.container {
  display: flex;
  background-color: #f0f0f0;
  padding: 20px;
}

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

在这个例子中，“项目 2”上的 margin-left: auto 会将其直接推到容器的最右侧边缘。这是因为 margin: auto 像海绵一样，吸收了左侧所有的可用剩余空间。