0Pricing
CSS Academy · 课时

Flex Grow、Shrink 与 Basis

使用 flex 简写属性控制 Flex 项目的伸展、收缩和基础尺寸。

Flex Grow、Shrink 与 Basis 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

flex 简写属性

在弹性项目上使用 flex 简写属性，可以设置三个值：flex-grow、flex-shrink 和 flex-basis。

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis 设置弹性项目在增长或收缩之前的初始尺寸。在行方向下，它会覆盖宽度。auto 使用项目的宽度或内容尺寸。

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow 决定在有可用剩余空间时，项目相对于同级项目可以增长多少。值为 0 表示不增长。值越大，按比例获得的空间越多。

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

flex-grow 示例

如果容器有 300px 的剩余空间，其中两个项目的 flex-grow 分别为 1 和 2，那么第一个项目会额外获得 100px，第二个项目会额外获得 200px（比例为 1:2）。

flex-shrink

flex-shrink 控制空间不足时项目的收缩程度。默认值为 1（所有项目均等收缩）。设置为 0 可防止收缩。

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

常见的 flex 简写值

请记住以下常见模式：

  • flex: 1 = 等量增长和收缩，基准值为 0%
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto（固定不变）
  • flex: 0 0 200px = 固定为 200px，不增长也不收缩

flex: 1 —— 等量分配

在所有子元素上设置 flex: 1，即可等量分配可用空间。基准值变为 0%，因此项目从零开始增长，并按比例分配空间。

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis 与 width

在主轴方向上，flex-basis 的优先级高于 width。如果同时设置两者，flex-basis 会生效（除非 flex-basis 为 auto，此时会交由 width 决定）。

内在尺寸与外在尺寸

当 flex-basis: 0（如 flex: 1）时，项目从 0 开始并按比例增长，这是真正的按比例分配。使用 flex-basis: auto 时，项目会从其自然内容尺寸开始，然后再增长。

经典三栏布局模式

一种经典布局：固定侧边栏 + 可伸缩主区域 + 固定侧边栏：

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

结合 flex 使用 min-width 和 max-width

将 min-width 和 max-width 与 flex-grow 一起使用，可以控制增长范围：

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

快速检查

一个项目设置了 flex: 0 0 200px。这意味着什么？

回顾

flex-grow 按比例分配额外空间。flex-shrink 控制项目如何压缩。flex-basis 设置起始尺寸。简写属性 flex: 1 可以实现等量空间分配。在同一个容器中，对固定尺寸的项目使用 flex: 0 0 Xpx，对可伸缩项目使用 flex: 1。

常见问题解答

「Flex Grow、Shrink 与 Basis」课时是免费的吗？

是的 — 「Flex Grow、Shrink 与 Basis」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Flex Grow、Shrink 与 Basis」这节课中我会学到什么？

使用 flex 简写属性控制 Flex 项目的伸展、收缩和基础尺寸。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「Flex Grow、Shrink 与 Basis」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Display、Flex 与 Flex Direction
  2. Justify-Content 与 Align-Items
  3. Flex 换行与 Align-Content
  4. Flex Grow、Shrink 与 Basis
← 返回 CSS Academy