Flex 简写模式
掌握 flex 简写属性，并理解 flex: 1、flex: none 和 flex: auto 等常见值。
Flex 简写模式 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
重新认识 flex 简写
flex 简写可以在一条声明中设置 flex-grow、flex-shrink 和 flex-basis。理解这些简写形式对于实际布局至关重要。
flex: 1
flex: 1 等价于 flex: 1 1 0%。项目从零基础尺寸开始，并等比例增长以填满可用空间。这是最常用的等宽列简写形式。
<div class="equal-cols">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
flex: auto
flex: auto = flex: 1 1 auto。项目从其自然内容尺寸开始，然后按比例增长或缩小。增长时，内容较宽的项目会获得更多空间。
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
</div>
flex: none
flex: none = flex: 0 0 auto。项目是刚性的，不会增长或缩小。尺寸由其自然内容宽度或显式指定的宽度/高度决定。
<div class="row">
<div class="logo">Logo</div>
<div>Flexible content</div>
</div>
flex: 0 0 Xpx
这是一个固定尺寸且不可伸缩的项目。要创建精确宽度的侧边栏面板，这是最明确的方式：
<div class="layout">
<div class="sidebar-left">Left</div>
<div class="main-content">Main</div>
<div class="sidebar-right">Right</div>
</div>
flex: 1 与 flex: 1 1 auto
关键区别在于：使用 flex: 1（基础尺寸为 0%）时，所有项目都从 0 开始并按比例增长。使用 flex: 1 1 auto 时，项目从其自然内容尺寸开始，然后增长。这会影响剩余空间的分配方式。
flex: 2 比例
请使用不相等的 flex-grow 值来按比例分配空间：
<div class="split">
<div class="main">Main (2/3)</div>
<div class="side">Side (1/3)</div>
</div>
组合固定项目与弹性项目
实际项目中最常见的模式是：固定侧边栏加上可伸缩的主要内容：
<div class="layout">
<div class="sidebar">Sidebar 280px</div>
<div class="content">Flexible content</div>
</div>
min-width: 0 弹性盒技巧
弹性项目的默认值是 min-width: auto。这可能会阻止项目缩小到其内容尺寸以下。对于应自由缩小的项目（例如需要截断文本的容器），请设置 min-width: 0。
<div class="row">
<div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>
卡片网格模式
带有可伸缩但受尺寸限制的卡片的响应式网格：
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
调试 flex 简写
请使用浏览器 DevTools 检查计算后的 flex-grow、flex-shrink 和 flex-basis 值。Flexbox 检查器叠加层还会以可视方式显示剩余空间和项目尺寸。
快速检查
flex: auto 会展开为什么？
回顾
请记住这些关键的 flex 简写形式：flex: 1（从零开始创建等宽列）、flex: auto（从自然尺寸开始增长）、flex: none（刚性项目）、flex: 0 0 Xpx（固定尺寸）。对于包含需要截断文本的弹性子项目，请使用 min-width: 0。请组合固定项目与弹性项目，以创建经典的侧边栏布局。
常见问题解答
「Flex 简写模式」课时是免费的吗？
是的 — 「Flex 简写模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「Flex 简写模式」这节课中我会学到什么？
掌握 flex 简写属性，并理解 flex: 1、flex: none 和 flex: auto 等常见值。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「Flex 简写模式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。