企业官网建设流程全解析

freeCodeCamp CSS Flexbox 教程：用 flex-basis 精确控制弹性项目的初始主轴尺寸

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本指南以 freeCodeCamp 开源课程中 Responsive Web Design（响应式网页设计）认证体系的 CSS Flexbox 模块为背景，深入讲解flex-basis属性在 Flex 布局算法中的作用、取值规则与典型用法，并完整还原编号为587d78ae367417b2b2512afd的编程挑战的题目要求、种子代码、官方解法与自动化校验逻辑。读完本文，你将能够独立完成该关卡，并理解flex-basis与flex-grow、flex-shrink、flex简写之间的协同关系。

挑战定位：CSS Flexbox 模块中的"初始尺寸"关卡

在 freeCodeCamp 的开源仓库中，本挑战的原始文档位于 curriculum/challenges/english/blocks/css-flexbox/587d78ae367417b2b2512afd.md。它是css-flexbox学习模块（block）的第 14 个关卡。

根据模块定义文件 curriculum/structure/blocks/css-flexbox.json 中的challengeOrder，整个模块共 17 个关卡，本挑战的前后衔接关系如下：

• 前序关卡：Use the flex-shrink Property to Shrink Items（第 12 关）与Use the flex-grow Property to Expand Items（第 13 关），分别讲解收缩与扩张因子；
• 本关卡：Use the flex-basis Property to Set the Initial Size of an Item（第 14 关）；
• 后续关卡：Use the flex Shorthand Property（第 15 关）与Use the order Property to Rearrange Items（第 16 关）。

从 curriculum/structure/superblocks/responsive-web-design.json 可以看到，css-flexbox模块归属于经典的响应式网页设计（Responsive Web Design）认证 superblock，helpCategory为HTML-CSS。这些相邻挑战使用几乎相同的双色盒子 HTML 骨架，循序渐进地引导学习者掌握 Flex 布局的每一个核心属性，因此本关卡的结论可以无缝迁移到其前后关卡中。

flex-basis 是什么：调整发生前的"初始尺寸"

原文档给出的核心定义值得逐句拆解：

Theflex-basisproperty specifies the initial size of the item before CSS makes adjustments withflex-shrinkorflex-grow.

即：flex-basis指定的是弹性项目在flex-shrink/flex-grow做出尺寸调整之前的初始尺寸。它回答的问题是："当没有多余的容器空间需要瓜分、也没有空间溢出需要收缩时，这个项目应该占多大？"

在 Flex 布局的算法里，一个弹性项目在主轴上最终占据的尺寸大致遵循"初始尺寸 → 按flex-grow扩张 → 按flex-shrink收缩"的处理顺序。理解这一点非常关键：flex-basis是所有后续弹性计算的起点，flex-grow与flex-shrink只是在这个起点上根据容器剩余空间做加减法。

关于取值，原文档明确指出：

The units used by theflex-basisproperty are the same as other size properties (px,em,%, etc.). The valueautosizes items based on the content.

flex-basis的取值单位与width、height等普通尺寸属性完全一致，包括但不限于：

需要特别强调auto：它是flex-basis的默认值。当值为auto时，浏览器会先看项目是否显式设置了主轴方向的width（行方向）或height（列方向），有则使用该值，否则由内容撑开。因此，若未声明flex-basis，弹性项目会表现为"内容有多宽就占多宽"，这也是新手常困惑"为什么 Flex 里的盒子没有撑满容器"的原因之一。

挑战要求：为两个盒子设置不同基准宽度

本关卡要求完成一个纯 HTML + CSS 的编码任务（frontmatter 中challengeType: 0，且模块helpCategory为HTML-CSS，属于浏览器内运行的动手型关卡）。任务内容如下：

Set the initial size of the boxes usingflex-basis. Add the CSS propertyflex-basisto both#box-1and#box-2. Give#box-1a value of10emand#box-2a value of20em.

即：在#box-1上设置flex-basis: 10em;，在#box-2上设置flex-basis: 20em;。

种子代码结构

挑战从下面的种子代码开始，你可以把它粘贴到任意 HTML 文件中做本地实验（原文件位于 curriculum/challenges/english/blocks/css-flexbox/587d78ae367417b2b2512afd.md 的--seed--部分）：

<style> #box-container { display: flex; height: 500px; } #box-1 { background-color: dodgerblue; height: 200px; } #box-2 { background-color: orangered; height: 200px; } </style> <div id="box-container"> <div id="box-1"></div> <div id="box-2"></div> </div>

注意这里两个盒子的 CSS 里都只声明了height: 200px，没有声明任何宽度类属性。由于#box-container是display: flex的弹性容器且默认主轴为水平方向（flex-direction: row），盒子的"宽度"维度就由 Flex 算法接管。若不设置flex-basis，两个盒子将按auto的默认规则被内容宽度（此处为空盒子，宽度近乎为 0）决定，视觉上表现为两个贴在一起的窄色条。

官方参考解法

--solutions--部分给出了可完整运行的参考实现：

<style> #box-container { display: flex; height: 500px; } #box-1 { background-color: dodgerblue; height: 200px; flex-basis: 10em; } #box-2 { background-color: orangered; height: 200px; flex-basis: 20em; } </style> <div id="box-container"> <div id="box-1"></div> <div id="box-2"></div> </div>

设置完成后，#box-1的初始主轴尺寸（此处即宽度）为10em，#box-2为20em，两者呈现明显的宽度差异，且这个差异随基准字体大小的改变而等比缩放。由于容器#box-container的height: 500px与盒子的height: 200px只约束交叉轴（垂直方向），盒子的高度在实验中不受flex-basis影响，这正好凸显了"flex-basis作用在主轴方向"这一特性。

动手实验：改变取值观察差异

建议读者实际运行以下变体来加深理解：

1. 将flex-basis都改为auto（或不写），对比盒子宽度会塌缩为内容宽度；
2. 将容器宽度收窄到不足10em + 20em，观察两个盒子如何按默认的flex-shrink: 1等比收缩——此时flex-basis仍在后台充当收缩计算的基准；
3. 在后续关卡Use the flex Shorthand Property（见 curriculum/challenges/english/blocks/css-flexbox/587d78ae367417b2b2512afe.md）中加入flex-grow，观察多余空间如何在基准之上追加分配。

自动校验如何工作：从源码看测试逻辑

freeCodeCamp 的每个关卡都带有--hints--部分，运行在浏览器环境中的测试脚本会逐条检查学习者的代码。本挑战共有 4 条校验，可归纳为两类手段：

第一类：读取计算样式（getComputedStyle）确认属性真实生效。例如：

const boxOne = document.querySelector('#box-1'); const flexBasis = window.getComputedStyle(boxOne)['flex-basis']; assert.notStrictEqual(flexBasis, 'auto');

这里通过window.getComputedStyle(boxOne)['flex-basis']读取浏览器实际计算的样式值，并断言它不是auto，从而排除"虽然写了属性但被拼写错误或覆盖"的情况。

第二类：正则匹配源代码确认具体取值。例如：

assert.match(code, /#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g); assert.match(code, /#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g);

code变量代表学习者提交的 HTML 源码文本，该正则要求#box-1 { ... flex-basis: 10em; }的结构出现在代码中，#box-2同理需为20em。

理解这套机制的价值在于：第一类断言保证"样式真被浏览器应用了"，第二类断言保证"你写对了目标值"。两者结合，既防止侥幸过关（例如仅仅改动了别的属性导致计算值变化），又防止表面写法通过而实际语义错误。

挑战文档如何在仓库中被解析

本关卡的 Markdown 文件是 freeCodeCamp 课程的"单一事实来源"。在构建环节，tools/challenge-parser/parser/plugins/add-tests.js 等解析插件会提取--hints--区块，并强制要求"每条提示文本后必须紧跟一段测试代码"，二者成对出现否则直接抛错；同理，tools/challenge-parser/parser/plugins/add-solution.js 与add-seed.js分别负责解析参考解与种子代码。而文档 frontmatter（即开头的 YAML 元数据）则受 curriculum/schema/challenge-schema.js 校验，其中id为必填的对象 ID、title必填、challengeType必须是 0～33 的数字、dashedName必须符合 slug 规范、videoUrl与forumTopicId等字段按类型可选或必填。

也就是说，本文解析的那份 Markdown 最终会被转换为一个结构化的 challenge 数据对象，并注入课程生成流水线（client 侧的 gatsby-node.ts 负责利用它批量生成学习页面），这也是 freeCodeCamp"一份课程源文件驱动整个课程站"的工作方式。

从盒子的默认值理解 Flex 计算全貌

要真正掌握flex-basis，还需把它放回三个弹性属性的整体语境中。在同一模块中相邻的三个关卡恰好构成完整链条：

• flex-grow（第 13 关，见 587d78ae367417b2b2512afc.md）：容器有剩余空间时如何按比例扩张。若一个项目为1、另一个为3，后者多占的额外空间是前者的 3 倍；
• flex-shrink（第 12 关，见 587d78ad367417b2b2512afb.md）：容器空间不足时如何按比例收缩，数值越大收缩越剧烈；
• flex-basis（本关卡）：上述两种调整发生之前的初始主轴尺寸；
• flex简写（第 15 关）：把三者合并为一条声明，如flex: 1 0 10px等价于flex-grow: 1; flex-shrink: 0; flex-basis: 10px;，完整默认值为flex: 0 1 auto，即"不扩张、可收缩、基准由内容/宽度决定"。

把默认值flex: 0 1 auto与flex-basis: auto放在一起看，就能解释大多数 Flex 布局的直觉困惑：项目默认不抢占多余空间，只在空间不足时收缩，因此多个display: flex容器里的普通项目总是"贴着内容排列"，而不是被拉长填满。想让它们均匀铺开，就必须显式修改flex-grow；想让它们有确定的起步宽度，就必须显式设置flex-basis——这正是本关卡在整套课程中所处位置的意义所在。

小结

flex-basis是 CSS Flexbox 中定义"弹性项目初始主轴尺寸"的属性，它和px、em、%等单位兼容，auto为默认值且让尺寸回退到内容或显式宽高。在 freeCodeCamp 的 CSS Flexbox 挑战中，只需要为#box-1声明flex-basis: 10em;、为#box-2声明flex-basis: 20em;即可通关，背后则是基于计算样式与源码正则的双重自动校验机制。学完本文后，建议继续完成该模块的flex简写关卡，把flex-grow、flex-shrink、flex-basis三者的协同关系彻底打通。

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp