freeCodeCamp CSS Grid 课程实战：用 align-self 实现网格项的垂直对齐
freeCodeCamp CSS Grid 课程实战用 align-self 实现网格项的垂直对齐【免费下载链接】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 Grid 练习块围绕挑战 Align an Item Vertically using align-self使用align-self垂直对齐网格项展开。你将完整掌握align-self属性的取值与生效机制、它与justify-self/align-items/justify-items的关系并能直接复现课程中的 3×3 网格练习、通过课程自带的断言正则验证自己的写法。挑战在 CSS Grid 课程中的位置这个挑战位于课程文件 curriculum/challenges/english/blocks/css-grid/5a90375238fddaf9a66b5d3b.md 中属于css-grid块块配置见 curriculum/structure/blocks/css-grid.jsonhelpCategory为HTML-CSS并最终归属于响应式网页设计超级块见 curriculum/structure/superblocks/responsive-web-design.json。从 块结构文件 中的challengeOrder可以看出css-grid块共编排了 21 个挑战学习路径是循序渐进的先创建网格display: grid、grid-template-columns/grid-template-rows、fr 单位、grid-gap系列再用grid-column/grid-row控制跨度与间距然后进入单元素对齐justify-self水平→align-self垂直即本挑战最后进入容器级批量对齐justify-items水平→align-items垂直。本挑战dashedName: align-an-item-vertically-using-align-self排在justify-self挑战5a90374338fddaf9a66b5d3a.md之后、justify-items挑战5a90376038fddaf9a66b5d3c.md之前属于课程中单元素对齐阶段的核心一环。核心概念单元格cell与 align-self在 CSS Grid 中每个网格项的内容所在的那个盒子被称为一个单元格cell。前一个挑战讲过justify-self负责把项的内容在单元格内水平对齐本挑战要解决的是另一半——垂直方向的对齐。挑战文档给出的描述是就像你可以水平对齐一个项一样也可以垂直对齐一个项。做法是在该项上使用align-self属性。该属性接受与上一个挑战中justify-self完全相同的取值。结合前一个挑战 justify-self 文档 中对取值的完整说明align-self可接受的值为取值在单元格内的垂直效果stretch默认项拉伸填满单元格的整个高度start内容靠单元格的顶部center内容垂直居中end内容靠单元格的底部要点在于align-self写在网格项上只对当前这一个项生效这与后面align-items写在容器上、作用于所有项形成对照。练习场景一个 3×3 的网格挑战自带的种子代码--seed-contents--部分构建了一个 3 列 × 3 行的网格容器和 5 个彩色网格项style .item1 { background: LightSkyBlue; } .item2 { background: LightSalmon; } .item3 { background: PaleTurquoise; /* Only change code below this line */ /* Only change code above this line */ } .item4 { background: LightPink; } .item5 { background: PaleGreen; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } /style div classcontainer div classitem11/div div classitem22/div div classitem33/div div classitem44/div div classitem55/div /div这段种子的关键配置值得逐项理解grid-template-columns: 1fr 1fr 1fr与grid-template-rows: 1fr 1fr 1fr各建 3 条等宽列、3 条等高行5 个项按源顺序自动落入前 5 个单元格第 1 行 3 个、第 2 行 2 个min-height: 300px把容器高度撑开让每个单元格内部出现明显富余空间——这正是垂直对齐可见化的前提。如果单元格与项等高stretch默认值下看不出任何差异grid-gap: 10px行列间距统一为 10pxgrid-gap是grid-column-gap和grid-row-gap的简写对应块内更早的两个挑战5 个项只设置了不同背景色LightSkyBlue / LightSalmon / PaleTurquoise / LightPink / PaleGreen没有显式高度因此默认stretch行为下会填满各自单元格。任务指令--instructions--只有一句话将类名为item3的项垂直对齐到end。标准解法在.item3规则内、两行注释之间加入一条声明即可.item3 { align-self: end; }即修改后的.item3规则为.item3 { background: PaleTurquoise; align-self: end; }加上align-self: end后第 3 个项第一行第三列PaleTurquoise 色不再拉伸填满单元格高度而是收缩并贴到单元格的底边其上方留空——这就是垂直对齐到 end的可视化效果其余四个项不受影响仍然保持默认的stretch拉伸状态。课程的自动化验证方式该挑战属于challengeType: 0普通代码编辑挑战课程的测试代码放在文档的--hints--区块中核心是一条正则断言assert.match(code, /.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi);拆开看这条正则的意图/.item3\s*?{/定位.item3选择器的开括号\s*?容忍选择器与花括号之间的任意空白[\s\S]*align-self\s*?:\s*?end\s*?;要求在规则体内出现align-self: end;其中\s*?让冒号与等号两侧允许任意空白因此写成align-self : end或align-self:end ;等宽松格式也能通过末尾的[\s\S]*}与g/i标志规则体可以还有其他声明如已有的background且匹配不区分大小写。从这条断言可以推断出课程对答案的判定标准是结构性的只检查.item3规则中是否存在align-self: end声明不检查具体行位置或缩进。这也意味着学习者可以在/* Only change code ... */注释之间任意排版只要声明存在即通过。align-self 与同族属性的关系把本挑战放进整个 css-grid 块的对齐四连击来看四个属性的作用域恰好构成一个 2×2 的矩阵水平方向垂直方向单个网格项写在项上justify-self见 justify-self 挑战align-self本挑战所有网格项写在容器上justify-items见 justify-items 挑战align-items见 align-items 挑战四个属性接受同一套取值stretch/start/center/end区别只在作用对象与方向本挑战要求只动 item3 这一个所以必须用项级的align-self而不是容器级的align-items课程中 align-items 挑战 则是在.container上写align-items: end一次性把所有项都垂直贴底当容器上的align-items与项上的align-self同时存在时从课程编排顺序先项级、后容器级和 CSS 级联的通用规则看项级的align-self会覆盖容器级的对齐设定——这也是self 系列优先于 items 系列这一常见记忆口诀在课程语境下的体现。小结与延伸本挑战的最小改动只有一行——align-self: end;但它承载了 CSS Grid 对齐体系的完整心智模型网格项默认在单元格内stretch填满只有当单元格富余空间可见如min-height: 300px的 3×3 等分网格时对齐属性才产生可观察的视觉效果align-self是单点手术工具align-items是全场广播工具两者取值相同、作用域不同课程用一条正则断言align-self\s*?:\s*?end\s*?;做宽容而明确的自动判分写法宽松、判定标准单一。想继续深入可顺着 css-grid 块结构 中challengeOrder的后续条目学习grid-area模板划分、repeat()/minmax()/auto-fill等进阶主题所有挑战的完整种子代码与解法都存放在 curriculum/challenges/english/blocks/css-grid/ 目录下可按文件 id 直接查阅。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考