2026/9/8 23:30:39
FEATURED · 精选文章 
freeCodeCamp CSS Flexbox 教程用 flex-basis 精确控制弹性项目的初始主轴尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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认证 superblockhelpCategory为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等普通尺寸属性完全一致包括但不限于取值示例含义10em相对当前元素字体大小的 10 倍随字体大小缩放200px固定像素宽度50%相对弹性容器主轴尺寸的百分比auto默认值尺寸由内容本身决定即回退到项目的width/heightcontent严格按内容大小来确定基准值部分浏览器支持存在差异需要特别强调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 idbox-container div idbox-1/div div idbox-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 idbox-container div idbox-1/div div idbox-2/div /div设置完成后#box-1的初始主轴尺寸此处即宽度为10em#box-2为20em两者呈现明显的宽度差异且这个差异随基准字体大小的改变而等比缩放。由于容器#box-container的height: 500px与盒子的height: 200px只约束交叉轴垂直方向盒子的高度在实验中不受flex-basis影响这正好凸显了flex-basis作用在主轴方向这一特性。动手实验改变取值观察差异建议读者实际运行以下变体来加深理解将flex-basis都改为auto或不写对比盒子宽度会塌缩为内容宽度将容器宽度收窄到不足10em 20em观察两个盒子如何按默认的flex-shrink: 1等比收缩——此时flex-basis仍在后台充当收缩计算的基准在后续关卡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必须是 033 的数字、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.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
freeCodeCamp CSS Flexbox 教程：用 flex-basis 精确控制弹性项目的初始主轴尺寸
freeCodeCamp CSS Flexbox 教程用 flex-basis 精确控制弹性项目的初始主轴尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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认证 superblockhelpCategory为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等普通尺寸属性完全一致包括但不限于取值示例含义10em相对当前元素字体大小的 10 倍随字体大小缩放200px固定像素宽度50%相对弹性容器主轴尺寸的百分比auto默认值尺寸由内容本身决定即回退到项目的width/heightcontent严格按内容大小来确定基准值部分浏览器支持存在差异需要特别强调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 idbox-container div idbox-1/div div idbox-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 idbox-container div idbox-1/div div idbox-2/div /div设置完成后#box-1的初始主轴尺寸此处即宽度为10em#box-2为20em两者呈现明显的宽度差异且这个差异随基准字体大小的改变而等比缩放。由于容器#box-container的height: 500px与盒子的height: 200px只约束交叉轴垂直方向盒子的高度在实验中不受flex-basis影响这正好凸显了flex-basis作用在主轴方向这一特性。动手实验改变取值观察差异建议读者实际运行以下变体来加深理解将flex-basis都改为auto或不写对比盒子宽度会塌缩为内容宽度将容器宽度收窄到不足10em 20em观察两个盒子如何按默认的flex-shrink: 1等比收缩——此时flex-basis仍在后台充当收缩计算的基准在后续关卡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必须是 033 的数字、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.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
