本教程共 44 篇 · 第 32 篇 · 更新于 2026-07-29 · 约 14 分钟阅读

32. Flexbox 项目属性

本节目标：掌握 flex 容器内子元素的六个属性，理解 flex-grow、flex-shrink、flex-basis 如何共同决定项目的弹性尺寸。

容器属性控制整体布局方向，项目属性则让单个元素”表达自己的诉求”。每个 flex 项目都可以声明自己如何增长、收缩，甚至覆盖容器的对齐规则。

order：改变排列顺序

默认情况下，flex 项目按 HTML 源码顺序排列。order 属性可以重新指定顺序，值越小越靠前。

.item {
  order: 0; /* 默认值 */
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      gap: 8px;
    }
    .item {
      padding: 16px 24px;
      background: #3498DB;
      color: white;
      border-radius: 4px;
    }
    .item1 { order: 3; background: #E74C3C; }
    .item2 { order: 1; }
    .item3 { order: 2; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">源码第1</div>
    <div class="item item2">源码第2</div>
    <div class="item item3">源码第3</div>
  </div>
</body>
</html>

Note

只改变视觉顺序，不改变 DOM 顺序。屏幕阅读器仍按源码朗读，使用时注意可访问性。

flex-grow：如何分配剩余空间

flex-grow 定义项目在容器有剩余空间时如何扩张。默认值是 0，表示不扩张。

.item {
  flex-grow: 0; /* 默认值 */
}

数值是比例关系，不是绝对大小。比如一个项目 flex-grow: 2，另一个 flex-grow: 1，前者分到的剩余空间是后者的两倍。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      width: 500px;
      gap: 8px;
    }
    .item {
      padding: 16px;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
    .item1 { flex-grow: 1; background: #2ECC71; }
    .item2 { flex-grow: 2; background: #3498DB; }
    .item3 { flex-grow: 1; background: #9B59B6; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">grow:1</div>
    <div class="item item2">grow:2</div>
    <div class="item item3">grow:1</div>
  </div>
</body>
</html>

想让所有项目等宽撑满容器，给每个项目设

就行。这是导航栏等分布局的常用写法。

flex-shrink：如何收缩以适应空间

与 flex-grow 相反，flex-shrink 控制项目在空间不足时如何收缩。默认值是 1，表示等比收缩。

.item {
  flex-shrink: 1; /* 默认值 */
}

值越大，收缩得越多。设为 0 则拒绝收缩，保持原始尺寸。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      width: 400px;
    }
    .item {
      width: 200px;
      padding: 16px;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
    .item1 { flex-shrink: 1; background: #E67E22; }
    .item2 { flex-shrink: 0; background: #1ABC9C; } /* 不收缩 */
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">我会收缩</div>
    <div class="item item2">我不收缩</div>
  </div>
</body>
</html>

Note

的收缩计算比 flex-grow 复杂。浏览器会按”收缩比例 × 基础尺寸”加权分配收缩量，不是简单的等比。

flex-basis：项目的初始尺寸

flex-basis 定义项目在分配剩余空间之前的初始宽度。可以设为 auto（默认，取 width 值）或任何长度值。

.item {
  flex-basis: auto; /* 默认值 */
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      width: 500px;
    }
    .item {
      flex-basis: 150px;
      flex-grow: 1;
      padding: 16px;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
    .item1 { background: #E74C3C; }
    .item2 { background: #3498DB; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">basis:150px + grow:1</div>
    <div class="item item2">basis:150px + grow:1</div>
  </div>
</body>
</html>

Tip

的优先级高于 width。如果同时设置，浏览器以 flex-basis 为准（除非 flex-basis 是 auto）。

flex：最常用的简写属性

flex 是 flex-grow、flex-shrink、flex-basis 的简写。

.item {
  flex: 0 1 auto; /* 默认值 */
}

常见简写形式：

写法	等价于	效果
`flex: 1`	`1 1 0`	等比伸缩，基础尺寸为 0
`flex: auto`	`1 1 auto`	等比伸缩，基础尺寸为 auto
`flex: none`	`0 0 auto`	不伸缩，保持原始尺寸
`flex: 0 0 200px`	—	固定 200px，不伸缩

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      width: 500px;
      gap: 8px;
    }
    .item {
      padding: 16px;
      color: white;
      text-align: center;
      border-radius: 4px;
    }
    .fixed { flex: 0 0 120px; background: #95A5A6; }
    .auto  { flex: 1; background: #2ECC71; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item fixed">固定120px</div>
    <div class="item auto">自动填充</div>
  </div>
</body>
</html>

实际开发中最常用的是

，它让项目自动填满剩余空间，且所有项目等宽。

align-self：单独覆盖对齐

align-self 让单个项目覆盖容器的 align-items 设置，在交叉轴上独立对齐。

.item {
  align-self: auto; /* 默认值，继承 align-items */
}

取值与 align-items 相同：flex-start、flex-end、center、baseline、stretch。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      align-items: flex-start;
      height: 200px;
      gap: 8px;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 6px;
    }
    .item {
      padding: 16px;
      background: #3498DB;
      color: white;
      border-radius: 4px;
    }
    .special {
      align-self: flex-end; /* 这个项目靠底部 */
      background: #E74C3C;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">顶部对齐</div>
    <div class="item special">底部对齐</div>
    <div class="item">顶部对齐</div>
  </div>
</body>
</html>

项目属性速查表

属性	作用	默认值
`order`	排列顺序	`0`
`flex-grow`	增长比例	`0`
`flex-shrink`	收缩比例	`1`
`flex-basis`	初始尺寸	`auto`
`flex`	上面三个的简写	`0 1 auto`
`align-self`	单独交叉轴对齐	`auto`

理解 flex 的关键在于：浏览器先按 flex-basis 给每个项目一个初始尺寸，有剩余空间时按 flex-grow 比例分配，空间不足时按 flex-shrink 比例收缩。掌握这个流程，所有弹性布局都能看懂。