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

发布时间:2026/9/8 23:35:46

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),仅供参考
延伸阅读

更多相关文章

2026/9/8 23:35:46

Universal Android Debloater 免Root清理安卓预装完整指南

Universal Android Debloater 免Root清理安卓预装完整指南 【免费下载链接】universal-android-debloater Cross-platform GUI written in Rust using ADB to debloat non-rooted android devices. Improve your privacy, the security and battery life of your device. 项目…

2026/9/9 0:45:53

基于STM32的GPS导航系统设计与NMEA解析实战

简介:基于STM32的GPS导航配套资料包,面向嵌入式开发者和电子设计爱好者,聚焦如何在STM32平台上实现带GUI界面的GPS导航系统。资源共548个文件,以h/c源码、o目标文件及d/crf等编译中间文件为主,并包含hex、axf等固件输出…

2026/9/9 0:45:53

车辆精准搜索实战:Python+ElasticSearch亿级数据检索优化

简介:面向车辆大规模精准搜索场景的Python课程设计资源,将检索任务拆分为车辆型号识别与车身颜色识别两个子任务,采用迁移学习微调VGG16、Inception_V3、ResNet50等深度卷积神经网络,训练集上型号识别准确率可达97%,并…

2026/9/9 0:45:53

FAST-LIVO2解析:直接法紧耦合多传感器融合里程计

1. 从“融合”到“直接”:FAST-LIVO2到底解决了什么问题做机器人、无人机或自动驾驶感知的朋友,这几年应该没少被“多传感器融合里程计”这个词轰炸。激光雷达、惯性测量单元、相机三者各有所长,雷达测距准但点云稀疏、纹理弱,相机纹理丰富但…

2026/9/9 0:45:53

STM32L151RCT6低功耗MCU深度解析:架构、模式与开发实践

嵌入式圈子里有个很有意思的现象:一款芯片的生命力,往往不取决于它发布时有多惊艳,而取决于后来有多少人一直在用它趟坑、补文档、写库。STM32L151RCT6就是这样一颗“老而弥坚”的芯片。作为ST意法半导体低功耗产品线L1家族的高密度成员&…

2026/9/9 0:45:53

STM32F407VET6开发板详解:引脚、资源、LwIP网络与实战

1. 一块开发板凭什么火了这么多年先说个现象:你去任何嵌入式招聘要求里翻一翻,十个里面有八个写着“熟悉STM32”,再往下细看,出现频率最高的具体型号之一就是STM32F407VET6。淘宝销量、论坛提问量、教学视频播放量,这块…

2026/9/9 0:40:52

STM32F103C8T6驱动六轴机械臂目标抓取实战解析

简介:面向嵌入式开发者与机器人爱好者,这是一份基于STM32F103C8T6的六轴机械臂工程示例,重点演示目标位置抓取功能的软件实现,适合学习STM32外设控制、机械臂运动学或正在寻找可移植参考代码的读者。压缩包共851个文件、约23.2MB&…

2026/9/8 7:15:10

超人会飞不算本事:系统稳定依赖清晰规则与边界设计

开头先不绕弯子。“#斯坦李吐槽dc 所以超人是无缘无故会飞的嘛哈哈哈哈哈哈哈锤哥真是技术人才啊!#雷神 #复联”这类调侃式短标题,第一波冲击力在于它把两个宇宙的角色塞进同一个吐槽箱里,但细想一下就能发现,它真正碰到的根本不是…

2026/9/8 7:15:15

超人VS蜘蛛侠:拆解超级IP的影响力与传播方法论

把“蜘蛛侠 vs 超人”放在 CSDN 上聊,可能很多人第一反应是走错片场了。但如果把这两个角色看成“两个持续运营了 80 多年的文化产品”,你会发现,这场比较本质上是两个不同 IP 策略的长期结果对比:超人赢在定义了整个超级英雄题材…

2026/9/8 7:15:10

基于CNN的调制信号识别:MATLAB实现时频图分类实战

简介:本资源是一套面向通信工程与信号处理方向学习者、研究者的深度学习实践方案,聚焦调制信号自动检测与识别这一典型无线通信任务,解决传统方法依赖人工特征、低信噪比下性能下降等痛点。压缩包共12个文件(10.73MB)&…

2026/9/9 0:00:48

MHS模型硬件标准:让大模型像调用软件一样控制物理设备

让Claude真正看着显微镜说“这个细胞形态不太对”,或者让大模型自己调一版机械臂的运动轨迹,这事儿听上去已经很接近科幻片了。但你真上手试一次就会发现,模型不缺智商,缺的是一个能插进显微镜、机械臂、激光控制器里的“通用插座…

2026/9/9 0:00:48

AI五大核心方向详解:从机器学习到大模型,零基础转行选哪条?

会有人告诉我,他想转行学AI,但打开招聘网站一看直接傻眼:机器学习、深度学习、自然语言处理、计算机视觉、大模型应用……满屏都是这些词,好像每个都会一点,又好像每个都离自己很远。还有人上来就问“学Python还是学Ja…

2026/9/9 0:00:49

从50行最小循环到生产级AI引擎:工程化改造全解析

直接说干货。这一章我写的不是那种"hello world跑通某个模型"的教程,而是把AI引擎当做一个真正要上线、要被人调用、要扛流量的系统来聊。从最初只有50行的最小循环,到能够承载生产流量的AI引擎,中间差的不是代码量,而是…

2026/9/7 16:23:03

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/7 22:46:00

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/7 22:45:59

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
咨询二维码