CSS-Flexbox-Layout-Part2-Item-Properties

CSS Flexbox 弹性布局项目属性 flex-grow

字数统计: 3.1k阅读时长: 13 min

 2026/07/29 

第27课：Flexbox 弹性布局（下）——项目属性：`flex-grow`、`flex-shrink`、`flex-basis`、`order`、`align-self`

上一节课我们掌握了 Flex 容器上的六个属性，它们决定了整体排列规则。本节课将聚焦于 Flex 项目自身的属性——这些属性让你精确控制每个子元素如何伸缩、如何排列顺序、以及如何脱离群体的对齐规则。它们是 Flexbox 实现复杂响应式布局的核心武器。理解每个属性的计算原理，将帮助你写出更加简洁、灵活的 CSS，而无需依赖大量的媒体查询或固定宽度。

1. `flex-grow`：增长因子——瓜分剩余空间

flex-grow 定义当 Flex 容器有剩余空间时，当前项目应按照什么比例来膨胀自身以占据剩余空间。

默认值：0（即使有剩余空间，项目也不膨胀）。
取值：任意非负数值。数值是相对比例，并非绝对值。

<style>
  .container {
    display: flex;
    width: 600px;
    border: 2px solid black;
  }
  .item {
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: white;
  }
  .item1 { flex-grow: 1; background: #e74c3c; }
  .item2 { flex-grow: 2; background: #3498db; }
  .item3 { flex-grow: 1; background: #2ecc71; }
</style>

<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>

1.1 计算过程详解

假设每个项目没有设置 width（内容宽度均为 100px，总占用 300px）。容器宽度为 600px，剩余空间 = 600 - 300 = 300px。

增长因子总和 = 1 + 2 + 1 = 4。

item1 分得：300px × (1 / 4) = 75px → 最终宽度 = 100 + 75 = 175px
item2 分得：300px × (2 / 4) = 150px → 最终宽度 = 100 + 150 = 250px
item3 分得：300px × (1 / 4) = 75px → 最终宽度 = 100 + 75 = 175px

1.2 `flex-grow: 1` 的常见理解误区

当所有项目的 flex-grow 均为 1 且内容宽度相同时，它们会等分剩余空间。但它们并非等宽——最终宽度 = 内容宽度 + 等量的增长空间。要让它们真正等宽，需同时设置 flex-basis: 0（见第 3 节）。

2. `flex-shrink`：收缩因子——面对空间不足的妥协

flex-shrink 定义当 Flex 容器空间不足（项目总宽度超过容器宽度）时，当前项目应按照什么比例来收缩自身。

默认值：1（默认所有项目等比例收缩）。
取值：任意非负数值。值为 0 表示该项目拒绝收缩，即使溢出也不缩小。

<style>
  .container {
    display: flex;
    width: 400px;
    border: 2px solid black;
  }
  .item {
    flex-basis: 200px; /* 基准宽度 200px，总和 600px > 400px */
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
  }
  .item1 { flex-shrink: 1; background: #e74c3c; }
  .item2 { flex-shrink: 2; background: #3498db; }
  .item3 { flex-shrink: 0; background: #2ecc71; }
</style>

<div class="container">
  <div class="item item1">shrink: 1</div>
  <div class="item item2">shrink: 2</div>
  <div class="item item3">shrink: 0</div>
</div>

2.1 计算过程详解

三个项目 flex-basis 均为 200px，总宽度 600px，超出容器 600 - 400 = 200px。

加权收缩因子 = (shrink × basis) 之和：

item1：1 × 200 = 200
item2：2 × 200 = 400
item3：0 × 200 = 0（不参与收缩）

加权总和 = 200 + 400 + 0 = 600。

item1 收缩：200px × (200 / 600) ≈ 66.67px → 最终宽度 = 200 - 66.67 = 133.33px
item2 收缩：200px × (400 / 600) ≈ 133.33px → 最终宽度 = 200 - 133.33 = 66.67px
item3 不收缩，仍保持 200px，但可能溢出容器（因为前两项已收缩完 200px 的超出）。

2.2 拒绝收缩：`flex-shrink: 0`

设置 flex-shrink: 0 常用于侧边栏或固定宽度的操作栏，确保它们不被压缩变形。配合 flex-grow: 1 的主体内容区，可构建典型的双栏布局。

.sidebar {
  flex-shrink: 0;
  width: 250px;
}
.main-content {
  flex-grow: 1;
}

3. `flex-basis`：弹性基准——尺寸计算的起点

flex-basis 定义 Flex 项目在分配剩余空间之前的初始尺寸。它是伸缩计算的“基准线”。

默认值：auto（项目的尺寸取决于其 width / height 值，或内容的固有尺寸）。
取值：任何长度值（px、%、em、rem）、auto、content、0。

值	行为
`auto`	若项目有 `width` 则用 `width`；否则使用内容尺寸。
`0`	完全忽略内容尺寸和 `width`，仅按伸缩因子分配空间。实现等分列的核心。
`content`	基于项目内容自动确定尺寸（浏览器支持尚不完全）。
具体长度值	明确指定基准尺寸。

3.1 等分列的关键：`flex-basis: 0`

当所有项目设置 flex: 1（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0）时，剩余空间就是整个容器宽度，项目按 grow 等分。这才是真正的“等宽列”。

.equal-columns {
  display: flex;
}
.equal-columns > * {
  flex: 1; /* 等价于 flex: 1 1 0 */
}

如果仅设置 flex-grow: 1 而 flex-basis 保持 auto，则项目最终宽度 = 内容宽度 + 等分的剩余空间，不会等宽（因为内容宽度不同）。

4. `flex` 简写：将三者合一

flex 是 flex-grow、flex-shrink、flex-basis 的简写属性。推荐始终使用 flex 简写，而非单独设置子属性，因为它会自动将缺失值重置为合理默认值。

语法：flex: <flex-grow> <flex-shrink> <flex-basis>

4.1 常用简写值

简写	展开等价于	典型场景
`flex: 1`	`flex-grow: 1; flex-shrink: 1; flex-basis: 0`	等分剩余空间。
`flex: auto`	`flex-grow: 1; flex-shrink: 1; flex-basis: auto`	基于内容宽度伸缩。
`flex: none`	`flex-grow: 0; flex-shrink: 0; flex-basis: auto`	固定尺寸，不伸缩（如侧边栏）。
`flex: 0 1 auto`	默认值。仅收缩，不增长。	大多数项目的默认行为。
`flex: 1 0 200px`	增长可瓜分空间，不收缩，基准 200px。	最小 200px，空间富余时增大。

4.2 三种经典用法对比

/* 等宽列 */
.col { flex: 1; }

/* 自适应主体内容 + 固定侧边栏 */
.sidebar { flex: 0 0 250px; }    /* 不伸缩，固定 250px */
.main    { flex: 1; }            /* 占据剩余所有空间 */

/* 内容驱动的弹性项 */
.tag { flex: 0 1 auto; }         /* 默认：可收缩，不增长 */

5. `order`：改变视觉排列顺序

order 属性可以重新排列 Flex 项目在容器中的视觉顺序，而不影响 DOM 结构（HTML 中的源代码顺序不变）。

默认值：0
取值：任意整数（可为负数）。
排列规则：按 order 值从小到大排列。值相同的项目按源代码顺序排列。

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
/* 视觉顺序：item2 → item1 → item3 */

使用场景：

在移动端将主要内容推到顶部，同时保持 HTML 的语义顺序。
将“新增”或“热门”项目置顶而不修改后端返回数据的顺序。

重要警告：仅改变视觉顺序，不改变键盘导航（Tab 键）和屏幕阅读器的阅读顺序。为避免可访问性问题，应谨慎使用，并确保视觉顺序与逻辑顺序一致，或使用 tabindex 和 ARIA 调整导航。

6. `align-self`：个体的交叉轴对齐

align-self 允许单个 Flex 项目覆盖其所在行的 align-items 设置，仅影响该项目自身在交叉轴上的对齐。

值	行为
`auto`	默认。继承容器的 `align-items` 值。
`stretch`	拉伸以填满交叉轴。
`flex-start`	紧靠交叉轴起点。
`flex-end`	紧靠交叉轴终点。
`center`	在交叉轴上居中。
`baseline`	与同行其他项目的文本基线对齐。

.container {
  display: flex;
  align-items: center; /* 所有项目垂直居中 */
}
.special-item {
  align-self: flex-end; /* 这个项目靠底部对齐 */
}

典型场景：

导航栏中，图标按钮需与文字基线对齐，而其他项目垂直居中。
卡片组中，底部按钮始终贴底，而卡片内容居中。

7. 综合示例：自适应三栏布局 + 固定按钮

<style>
  .layout {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f5f5f5;
  }
  .logo {
    flex: 0 0 auto; /* 不伸缩，按内容大小 */
    font-weight: bold;
    font-size: 1.2em;
  }
  .search {
    flex: 1; /* 占据所有剩余空间 */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .user-avatar {
    flex: 0 0 40px; /* 固定 40px 宽高 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3498db;
    order: 1; /* 视觉上移到最后（若需要） */
  }
</style>

<div class="layout">
  <div class="logo">MyApp</div>
  <input class="search" type="text" placeholder="搜索...">
  <div class="user-avatar"></div>
</div>

课后练习

一、概念自测（选择题 / 填空题）

（单选） 要创建一个等宽的多列布局，最正确的 flex 值是？
A. flex-grow: 1
B. flex: auto
C. flex: 1
D. flex: 1 1 auto
（单选） 当一个 Flex 项目设置 flex-shrink: 0 时，意味着？
A. 该项目永远不收缩，即使容器空间不足。
B. 该项目收缩的比例为 0（即全部收缩）。
C. 该项目将自动隐藏。
D. 该项目将自动换行。
（填空） 要在不改变 HTML 源代码顺序的情况下，让三个 Flex 项目以 3、1、2 的顺序显示，应分别设置 order 为 ______、______、______。
（多选） 关于 align-self，哪些说法正确？
A. 它设置 Flex 容器的对齐方式。
B. 它可以覆盖 align-items 对单个项目的影响。
C. 取值与 align-items 完全一致。
D. 默认值为 auto，表示继承 align-items。

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要实现一个评论列表组件，每条评论包含左侧头像（固定 48px）、中间评论内容（自适应宽度）和右侧时间戳（不伸缩，始终显示在右上角）。时间戳需要使用 align-self: flex-start 使其顶部对齐。列表底部有一个“加载更多”按钮，通过 order 调整其在 Flex 容器中的位置（若需要）。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML + CSS 代码。提示词中需明确指定 Flex 项目属性的使用（flex 简写、align-self、order）以及间距 gap。

三、Agent 模式下的提示词示例

你是一个资深前端开发 Agent。请使用 Flexbox 构建一个评论列表组件。需要创建以下文件：

index.html：包含 3 条示例评论的 HTML 结构。每条评论是一个 Flex 行容器 .comment，包含 .avatar（占位 <img>）、.body（评论内容 <div>）和 .timestamp（时间 <time>）。

styles/comment.css：定义 .comment 为 display: flex; align-items: flex-start; gap: 12px;。.avatar 设置 flex: 0 0 48px; 和固定的 width/height。.body 设置 flex: 1;。.timestamp 设置 flex: 0 0 auto; align-self: flex-start; 以保证其始终在右上角不随内容高度变化。

在列表末尾添加一个 .load-more 按钮，通过 order: 1 将其视觉上放在列表最下方（若无需要可省略）。若需要调整顺序，请同时考虑可访问性。

在 styles/global.css 中引入基础重置和字体。所有文件注释清晰，直接可运行。

课后练习答案

一、概念自测答案

C
- 解析：flex: 1 展开为 flex: 1 1 0，flex-basis: 0 确保忽略内容宽度，按比例等分空间。A 未设置 flex-basis: 0 会导致非等宽。
A
- 解析：flex-shrink: 0 表示拒绝收缩，即使空间不足也不缩小，可能溢出。
答案（示例）：item1: order: 2; item2: order: 3; item3: order: 1;
- 解析：order 值从小到大排列，所以 1 → 2 → 3 对应 visual 3 → 1 → 2。
B、C、D
- 解析：A 错误，align-self 是项目属性，作用于单个项目；B、C、D 正确。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请生成一个评论列表的 HTML 和 CSS 代码。要求：

每条评论 .comment 使用 Flex 行布局，align-items: flex-start，gap: 12px。

头像 .avatar 设置 flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%。

评论内容 .body 设置 flex: 1，包含作者名和文本，内部可自由设计。

时间戳 .timestamp 设置 flex: 0 0 auto; align-self: flex-start; color: #999; font-size: 0.85em; 保证顶部对齐。

提供 3 条示例评论，使用占位头像（可用 via.placeholder.com）。

代码简洁，注释说明关键属性的作用。直接输出完整 HTML 文件。”

三、Agent 模式下的提示词示例

（见上文 Agent 提示词部分）

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/28/CSS-Flexbox-Part2/

发表日期：July 28th 2026, 9:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

Next Post

CSS-Grid-Layout-Part1-Container-Properties
Previous Post

CSS-Flexbox-Layout-Part1-Container-Properties

CATALOG

1. 第27课：Flexbox 弹性布局（下）——项目属性：flex-grow、flex-shrink、flex-basis、order、align-self

CSS-Flexbox-Layout-Part2-Item-Properties

第27课：Flexbox 弹性布局（下）——项目属性：flex-grow、flex-shrink、flex-basis、order、align-self

1. flex-grow：增长因子——瓜分剩余空间

1.1 计算过程详解

1.2 flex-grow: 1 的常见理解误区

2. flex-shrink：收缩因子——面对空间不足的妥协

2.1 计算过程详解

2.2 拒绝收缩：flex-shrink: 0

3. flex-basis：弹性基准——尺寸计算的起点

3.1 等分列的关键：flex-basis: 0

4. flex 简写：将三者合一

4.1 常用简写值

4.2 三种经典用法对比

5. order：改变视觉排列顺序

6. align-self：个体的交叉轴对齐

7. 综合示例：自适应三栏布局 + 固定按钮

课后练习

一、概念自测（选择题 / 填空题）

二、AI 编程任务：编写面向 AI 的提示词

三、Agent 模式下的提示词示例

课后练习答案

一、概念自测答案

二、AI 编程任务参考答案（提示词示例）

三、Agent 模式下的提示词示例

第27课：Flexbox 弹性布局（下）——项目属性：`flex-grow`、`flex-shrink`、`flex-basis`、`order`、`align-self`

1. `flex-grow`：增长因子——瓜分剩余空间

1.2 `flex-grow: 1` 的常见理解误区

2. `flex-shrink`：收缩因子——面对空间不足的妥协

2.2 拒绝收缩：`flex-shrink: 0`

3. `flex-basis`：弹性基准——尺寸计算的起点

3.1 等分列的关键：`flex-basis: 0`

4. `flex` 简写：将三者合一

5. `order`：改变视觉排列顺序

6. `align-self`：个体的交叉轴对齐