在现代 Web 前端设计中，CSS Flexbox（弹性盒子布局）已经成为一个不可或缺的布局工具。本文将详细解析以下 CSS 源代码的含义及其实际应用场景：

page {
  flex: 1;
  display: flex;
}

通过分析这些代码，我们将从 Flexbox 的基础原理出发，结合浏览器的渲染机制，阐述它们如何协同工作。为了更好地理解这些概念，我们会以具体案例为背景进行说明。

Flexbox 基础概念解析

在这段代码中，page 是一个 HTML 元素的选择器，其样式规则主要涉及 Flexbox 布局的两个核心属性：

  1. display: flex;
  2. flex: 1;

为了更深入地理解它们的作用，让我们逐一剖析。

display: flex; 的含义

当一个元素被设置为 display: flex; 时，它的直接子元素会被转换为弹性盒子的子项（flex items），这意味着这些子项会依据弹性布局模型来排列。

弹性布局模型的关键特性：

  • 主轴与交叉轴： 弹性布局以主轴（main axis）和交叉轴（cross axis）为核心。默认情况下，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。通过 flex-direction 属性，开发者可以更改主轴的方向，例如变为从上到下。

  • 自动调整空间： 弹性布局的一个重要特性是，它能够根据容器大小自动调整子项的排列方式。例如，子项会在主轴方向上分配剩余的空间或进行缩放。

真实案例：

假设我们有一个导航栏，其结构如下：

<nav>
  <a rel="nofollow" href="#">Home</a>
  <a rel="nofollow" href="#">About</a>
  <a rel="nofollow" href="#">Contact</a>
</nav>

通过设置 display: flex;，导航栏的链接可以被水平排列，而无需使用浮动（float）或绝对定位（absolute positioning）。

nav {
  display: flex;
}

结果是，Home、About 和 Contact 会自动排列在一行中。

flex: 1; 的含义

flex: 1; 是弹性盒子布局中一个简洁的表达式，它实际上是 flex-grow, flex-shrink 和 flex-basis 三个属性的简写形式：

  • flex-grow: 1; 表示该元素可以按比例扩展以填充主轴方向上的剩余空间。
  • flex-shrink: 1; 表示该元素在容器变小的情况下会按比例缩小。
  • flex-basis: 0%; 表示元素的初始主轴大小为零。

综合来看，flex: 1; 的效果是让元素均匀分配容器中的剩余空间。

真实案例：

想象一个内容区域划分的场景：

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
</div>

我们希望 sidebar 的宽度固定，而 main 部分占据剩余空间。这可以通过以下代码实现：

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main {
  flex: 1;
}

当窗口宽度变化时，main 区域会根据剩余空间动态调整其宽度，而 sidebar 始终保持 200 像素宽。

浏览器渲染机制与 Flexbox 的协作

浏览器在渲染页面时，通常遵循以下步骤：

  1. 解析 HTML，构建 DOM 树。
  2. 解析 CSS，生成 CSSOM（CSS 对象模型）。
  3. 将 DOM 树和 CSSOM 结合，生成渲染树。
  4. 布局计算（Layout）：
    • 根据 CSS 属性和文档流计算每个元素的尺寸和位置。
    • Flexbox 的布局计算在这个阶段完成。
  5. 绘制（Painting）：
    • 渲染树被转换为像素。

Flexbox 在布局计算中的作用

在布局计算阶段，Flexbox 的算法会决定子项在主轴和交叉轴上的排列方式。

真实世界的优化案例：

某电商网站的产品展示页面需要兼容不同的屏幕尺寸。在使用 Flexbox 布局前，开发团队尝试过固定宽度的栅格系统，但在移动设备上效果欠佳。

改用 Flexbox 后，通过以下代码：

.products {
  display: flex;
  flex-wrap: wrap;
}
.product {
  flex: 1 1 calc(33.33% - 10px);
  margin: 5px;
}

每行最多显示三列产品，且在小屏幕设备上，产品会根据剩余空间自动调整大小和排列方式，大幅提升用户体验。

总结

这段 CSS 代码展现了 Flexbox 布局的核心特点：

  1. 通过 display: flex;，将元素转换为弹性盒子容器，为其子项赋予弹性排列能力。
  2. 通过 flex: 1;，实现子项的动态扩展与收缩。

无论是导航栏、内容分区还是响应式网格系统，Flexbox 都能提供高效、简洁的解决方案。在浏览器的渲染流程中，Flexbox 的布局计算与页面的动态调整密不可分。