freeCodeCamp CSS Flexbox 教程实战：用 flex-direction: column 让弹性子项垂直堆叠

freeCodeCamp CSS Flexbox 教程实战用 flex-direction: column 让弹性子项垂直堆叠【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 开源课程库中 css-flexbox 块 的第 5 个挑战源文件587d78ac367417b2b2512af4.md系统讲解如何在弹性容器flex container中使用flex-direction: column把子元素改为纵向堆叠并顺带剖析 freeCodeCamp 挑战文件的组织方式与自动判题原理。读完你既能独立完成该关卡也能理解 freeCodeCamp 用一条 CSS 规则配合最小化 DOM 进行教学的设计思路并可直接把同一套纵向排列技巧应用到自己的布局中。这节课在 freeCodeCamp 课程体系中的位置自由代码营把每个知识点封装成一份带结构化 frontmatter 的 Markdown 挑战文件。本课对应的文件是 curriculum/challenges/english/blocks/css-flexbox/587d78ac367417b2b2512af4.md文件名本身即挑战 ID587d78ac367417b2b2512af4。在课程结构描述文件 curriculum/structure/blocks/css-flexbox.json 中css-flexbox块共编排了 17 个循序渐进的小挑战覆盖display: flex、flex-direction、justify-content、align-items、flex-wrap、flex-shrink、flex-grow、flex-basis、flex简写、order、align-self等核心知识点本课标题为 “Use the flex-direction Property to Make a Column”是其中的第 5 个条目紧跟在“Make a Row”与 Twitter 卡片行布局两个练习之后属于 Responsive Web Design 超级块该块在 responsive-web-design*.json 系列结构文件中被引用下 HTML/CSS 方向的学习路径块布局类型为legacy-challenge-list。认识 flex-direction弹性容器决定主轴方向本课描述开头直接点明前两个挑战已经把flex-direction设置成了row。在进一步动手前先厘清这套 CSS 机制给父元素加上display: flex它就变成一个弹性容器其所有直接子元素自动成为弹性项目flex items。flex-direction作用在父容器上用来决定弹性项目沿主轴main axis的排列方向从而把子元素排成行或列。默认值是row子元素水平排成一行设为column后主轴变为垂直方向子元素由上到下纵向堆叠成列。参考同块前一个挑战 587d78ab367417b2b2512af2.md 的说明flex-direction一共有四个取值可归纳如下取值主轴方向子元素视觉效果row水平从左到右排成一行默认值row-reverse水平从右到左排成一行起点换到右侧column垂直从上到下纵向堆叠成一列column-reverse垂直从下到上纵向堆叠成一列起点换到底部需要特别留意column并不是“没有布局”而是把布局方向从水平切换为垂直——主轴与侧轴cross axis互换主轴上的尺寸控制、对齐属性如后文课程会讲的justify-content控制主轴方向随之作用于垂直方向。挑战目标与初始代码本课的指令非常聚焦给#box-container元素添加 CSS 属性flex-direction并把值设为column。挑战的初始代码seed提供了一个最小的实验环境style #box-container { display: flex; height: 500px; } #box-1 { background-color: dodgerblue; width: 50%; height: 50%; } #box-2 { background-color: orangered; width: 50%; height: 50%; } /style div idbox-container div idbox-1/div div idbox-2/div /div先分析这份 seed 的意图#box-container已经通过display: flex成为弹性容器固定height: 500px但目前没有声明flex-direction因此采用默认值row——此时#box-1道奇蓝与#box-2橘红会水平并排在同一行内尽管每个盒子声明了width: 50%与height: 50%。两个子盒子的尺寸都被设为容器的一半且两色对比明显能让学习者一眼看出布局方向的差异row时两个色块左右并排改为column后主轴变成垂直方向两个色块改为上下排列。编写答案一行 CSS 把排列改为纵向按照指令只需在#box-container的规则内补上一行使其成为纵向布局style #box-container { display: flex; height: 500px; flex-direction: column; } #box-1 { background-color: dodgerblue; width: 50%; height: 50%; } #box-2 { background-color: orangered; width: 50%; height: 50%; } /style要点与效果说明flex-direction: column声明在父容器上子元素无需任何改动即会响应方向变化——这正是弹性布局“由容器统一指挥子项排列方向”的核心特征。方向改为纵向后主轴变为垂直#box-1与#box-2各占容器一半高度在 500px 容器下约为各 250px由上而下依次堆叠形成清晰的纵向两段式色块。修改前后唯一的差异就是这一条声明充分说明display: flex只负责“开启弹性上下文”而真正的行/列排布由flex-direction决定。顺带一提若把值换成column-reverse两个盒子会交换上下顺序橘红色块在上、蓝色块在下这属于后续可自行验证的延伸实验。自动判题如何验证你的答案freeCodeCamp 对这类 HTML/CSS 练习采用浏览器内运行时测试。本课的# --hints--区块给出了唯一一条判定规则const boxContainer document.querySelector(#box-container); const flexDirection window.getComputedStyle(boxContainer)[flex-direction]; assert.strictEqual(flexDirection, column);这段测试代码的验证链路值得拆解document.querySelector(#box-container)定位被测元素window.getComputedStyle(boxContainer)[flex-direction]读取该元素最终计算样式computed style即使flex-direction是通过样式表而非内联样式写入的也能正确读到assert.strictEqual(flexDirection, column)做严格相等断言——若你没有添加该声明计算值会是默认的row测试即失败只有显式设为column才通过。从实现角度印证本课 frontmatter 中的challengeType: 0对应共享配置 packages/shared/src/config/challenge-types.ts 中的html类型而该类型在配置中映射为classic运行方式与tests判题模式即这种“提交 HTML/CSS 后由浏览器执行断言”的交互练习。同时课程仓库用 curriculum/schema/challenge-schema.js 对挑战文件的字段做 Joi 校验其中hints、seed、solutions均为受约束的规范结构保证每个挑战都能被统一的解析与执行管线处理。参考实现挑战文件末尾的# --solutions--区块提供了官方参考答案与本课的完整实现一致style #box-container { display: flex; height: 500px; flex-direction: column; } #box-1 { background-color: dodgerblue; width: 50%; height: 50%; } #box-2 { background-color: orangered; width: 50%; height: 50%; } /style div idbox-container div idbox-1/div div idbox-2/div /div举一反三在真实组件中把内容排成列掌握了原理后可以把同样的手法用于真实界面元素。紧邻本课的下一个挑战 587d78ac367417b2b2512af5.md 就要求在一个仿 Twitter 推文卡片中对头部左侧的.profile-name元素内含昵称h3与账号h4两行文字设置flex-direction: column让“姓名在上、账号在下”自然纵向排列header .profile-name { display: flex; flex-direction: column; margin-left: 10px; }该元素的判题同样通过window.getComputedStyle(profileName)[flex-direction]断言其等于column。注意其父级header依旧保持flex-direction: row——这正是 flexbox 的常见用法外层容器负责把头像、名称区、Follow 按钮排成一行内层.profile-name再独立开辟自己的纵向上下文嵌套容器各自声明方向互不干扰。挑战文件格式解剖作者视角的补充对于想了解 freeCodeCamp 课程文件机制的读者本课文件本身就是一份完整的最小样例其 Markdown 结构如下frontmatter包含id、title、challengeType、videoUrl、forumTopicId、dashedName等元数据schema 校验规定dashedName必须匹配^[a-z0-9-]$见 curriculum/schema/challenge-schema.js 中的slugREforumTopicId为数字、videoUrl可为空字符串。# --description--用一两句话交代新知识点与前置知识的关系本课指出“前两个挑战都用了row”。# --instructions--给出可执行的任务添加并赋值flex-direction。# --hints--用真实浏览器断言定义“通过”标准即本课前面展示的getComputedStyle检查。## --seed-contents--学习者的起点代码运行前由课程工具链解析、注入到可编辑页面。# --solutions--官方参考实现用于对照与后续的自动化测试。因此本课既是一道面向初学者的 5 分钟小练习也是一份结构规范、可被工具链解析与自动判题的“可执行文档”。若想继续巩固该系列知识可以直接沿 css-flexbox 块 的挑战顺序学习后续的justify-content、align-items与flex-wrap等课程最终完整掌握 flexbox 的一维布局能力。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考