CSS flexbox 简介

Begindev 编辑部 March 25, 2026

Flexbox（弹性盒子）是 CSS 中一个强大的布局工具。它提供了一种更高效的方式，在容器内的项目之间排列、对齐和分配空间，即使这些项目的大小是未知的或动态变化的。

它是一个一维布局模型。这意味着它非常擅长控制行（水平）或列（垂直）的布局，但不能同时控制两者。掌握 Flexbox 是现代 Web 开发的关键，因为它大大简化了那些在旧版 CSS 技术中极难甚至无法实现的复杂响应式布局。

1. 核心概念：理解 Flexbox

Flexbox 布局主要由两部分组成：弹性容器 (Flex Container) 和 弹性项目 (Flex Items)^。

弹性容器：包裹弹性项目的父元素。
弹性项目：弹性容器的直接子元素。

只要给一个容器设置 display: flex 或 display: inline-flex，你就能把它变成一个弹性容器，而它里面的直接子元素会自动变成弹性项目。

1.1 弹性容器 (The Flex Container)

弹性容器是 Flexbox 布局的基础。它为子元素创建了一个弹性上下文，让你能够自由控制它们的大小、位置和对齐方式。

如何创建弹性容器：

你只需要给元素应用 display 属性，并使用以下值之一：

display: flex;：生成一个块级 (block-level) 弹性容器。它会占据所有可用宽度，并从新的一行开始。
display: inline-flex;：生成一个行内 (inline-level) 弹性容器。它只占据必要的宽度，并与周围的内容在同一行流动。

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

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

.container > div {
  background-color: #ddd;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

在这个例子中，带有 container 类的 div 就是弹性容器，里面嵌套的三个 div 是弹性项目。默认情况下，这些弹性项目会排成一行。

1.2 弹性项目 (The Flex Items)

弹性项目是弹性容器的直接子元素。它们会根据容器上定义的规则进行布局，同时，你也可以为它们单独设置属性来改变各自的行为。

弹性项目的常用属性：

flex-grow: 如果有多余的空间，决定该项目相对于其他项目放大的比例。
flex-shrink: 如果空间不足，决定该项目相对于其他项目缩小的比例。
flex-basis: 在分配多余空间之前，指定项目在主轴上的初始大小。
flex: 这是一个简写属性，用于同时设置 flex-grow、flex-shrink 和 flex-basis。
order: 控制弹性项目在容器中出现的先后顺序。
align-self: 允许你为某个特定的弹性项目单独设置对齐方式（覆盖容器的 align-items 属性）。

大小分配示例：

<div class="container">
  <div style="flex: 1;">项目 1</div>
  <div style="flex: 2;">项目 2</div>
  <div style="flex: 1;">项目 3</div>
</div>

在这个例子中，项目 2 占据的空间将是项目 1 和项目 3 的两倍，因为它的 flex-grow 值被设置为了 2，而其他两个是 1。

1.3 主轴与交叉轴 (Main Axis and Cross Axis)

理解这两个轴对于彻底掌握 Flexbox 至关重要。

主轴 (Main Axis)：弹性项目排列的主要方向。主轴的方向由 flex-direction 属性决定。默认情况下，主轴是水平的（从左到右）。
交叉轴 (Cross Axis)：垂直于主轴的轴线。它主要用于控制弹性项目在容器内的对齐。如果主轴是水平的，交叉轴就是垂直的；反之亦然。

举个例子：
如果 flex-direction 设置为 row（默认值），主轴是水平的，交叉轴是垂直的。如果设置为 column，主轴变为了垂直，而交叉轴变为水平。

2. 为什么要使用 Flexbox？

Flexbox 相比于传统的 CSS 布局（如浮动 float 或定位 position）拥有巨大优势，是现代前端开发不可或缺的利器。

2.1 优势一：极度简化的布局

过去需要复杂计算和 hack 手段才能实现的布局，现在只需几行 CSS 即可搞定。

示例：轻松创建一个导航栏
在这个例子中，我们将项目均匀分布并实现垂直居中。

<nav class="navbar">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</nav>

.navbar {
  display: flex;
  justify-content: space-around; /* 均匀分布项目 */
  align-items: center; /* 垂直居中项目 */
  background-color: #333;
  color: white;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
}

2.2 优势二：天生响应式设计

Flexbox 天生就是为响应式设计的。项目可以根据可用空间自动放大或缩小，你甚至可以结合媒体查询轻松改变它们的排列顺序或方向。

示例：大屏横排，小屏竖排

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

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行到下一行 */
}

.container > div {
  width: 30%; /* 每个项目占据容器宽度的 30% */
  margin: 10px;
}

/* 在小屏幕上，按列显示项目 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container > div {
    width: 100%; /* 每个项目占据容器宽度的 100% */
  }
}

2.4 优势四：不受 HTML 限制的顺序控制

你可以随时使用 order 属性改变弹性项目在页面上的视觉顺序，而不必去修改 HTML 源码的结构。这在针对不同屏幕尺寸调整布局时非常有用。

示例：改变元素的显示顺序

<div class="container">
  <div style="order: 3;">项目 1</div>
  <div style="order: 1;">项目 2</div>
  <div style="order: 2;">项目 3</div>
</div>

.container {
  display: flex;
}

.container > div {
  background-color: #ddd;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

注意：在上面的例子中，虽然“项目 1”在 HTML 中排在第一位，但因为它的 order 是 3，最终页面上显示的顺序将是：项目 2 -> 项目 3 -> 项目 1。