水平對(duì)齊網(wǎng)格項(xiàng))
freeCodeCamp 課程解析用 CSS Grid 的 justify-self 在單元格內(nèi)水平對(duì)齊網(wǎng)格項(xiàng)【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 課程庫(kù)中《Align an Item Horizontally using justify-self》挑戰(zhàn)文檔展開(kāi)講解 CSS Grid 中justify-self屬性如何控制單個(gè)網(wǎng)格項(xiàng)在其單元格cell內(nèi)的水平位置并結(jié)合該挑戰(zhàn)的完整種子代碼、官方參考答案以及 freeCodeCamp 挑戰(zhàn)文件的結(jié)構(gòu)與校驗(yàn)機(jī)制幫助讀者既掌握這一屬性本身的用法也理解它在課程體系中是如何被組織、測(cè)試與驗(yàn)收的。1. 挑戰(zhàn)定位課程結(jié)構(gòu)與文件組織該挑戰(zhàn)文檔位于英文課程curriculum的 CSS Grid 教學(xué)區(qū)塊中挑戰(zhàn)正文5a90374338fddaf9a66b5d3a.md區(qū)塊編排css-grid.json從 css-grid.json 的challengeOrder數(shù)組可以看到css-grid區(qū)塊共有 23 個(gè)挑戰(zhàn)本挑戰(zhàn)id5a90374338fddaf9a66b5d3a排在第 11 位。其前后文脈絡(luò)非常清晰... Use grid-column to Control Spacing 控制橫向跨列 Use grid-row to Control Spacing 控制縱向跨行 Align an Item Horizontally using justify-self ← 本文主角 Align an Item Vertically using align-self Align All Items Horizontally using justify-items Align All Items Vertically using align-items ...也就是說(shuō)課程先教占哪幾列/幾行再教在格子里怎么對(duì)齊先單項(xiàng)-self后全體-items符合由點(diǎn)及面的教學(xué)設(shè)計(jì)。該區(qū)塊在證書(shū)結(jié)構(gòu) responsive-web-design.json 中列于superblockChapters的末尾緊接在css-flexbox之后是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)認(rèn)證中 Flexbox 之后的第二個(gè)布局專(zhuān)題。1.1 挑戰(zhàn)文件的 Front Matter每個(gè)挑戰(zhàn)是一個(gè)帶 YAML front matter 的 Markdown 文件。本挑戰(zhàn)的頭部元數(shù)據(jù)為id: 5a90374338fddaf9a66b5d3a title: Align an Item Horizontally using justify-self challengeType: 0 videoUrl: https://scrimba.com/p/pByETK/cJbpKHq forumTopicId: 301122 dashedName: align-an-item-horizontally-using-justify-self其中challengeType: 0表示這是一個(gè) HTML/CSS 挑戰(zhàn)。這一點(diǎn)可以從共享包中的挑戰(zhàn)類(lèi)型定義得到印證——在 challenge-types.ts 中const html 0即編號(hào) 0 對(duì)應(yīng) HTML 挑戰(zhàn)類(lèi)型1 為 JS、2 為后端等。dashedName則是 URL 友好的短名稱(chēng)與挑戰(zhàn)文件同目錄下的文件命名以 id 為文件名形成目錄結(jié)構(gòu) 短名定位的雙索引方式。正文部分由約定的小節(jié)標(biāo)記組織# --description--講解、# --instructions--任務(wù)要求、# --hints--提示與自動(dòng)測(cè)試斷言、# --seed--編輯器種子代碼、# --solutions--參考答案。這些標(biāo)記會(huì)被課程構(gòu)建流程解析并在 challenge-schema.js 的 Joi schema 約束下完成校驗(yàn)保證每個(gè)挑戰(zhàn)文件的結(jié)構(gòu)完整、字段合法——從源碼結(jié)構(gòu)看整個(gè) curriculum 目錄下的 1.6 萬(wàn)多個(gè)挑戰(zhàn) Markdown 文件都依賴(lài)這套 schema 做質(zhì)量把關(guān)。2. 核心知識(shí)點(diǎn)justify-self 與單元格cell文檔正文--description--部分給出的完整定義如下在 CSS Grid 中每個(gè)網(wǎng)格項(xiàng)的內(nèi)容都位于一個(gè)被稱(chēng)為**單元格cell**的盒子內(nèi)?？梢栽诰W(wǎng)格項(xiàng)上使用justify-self屬性水平控制內(nèi)容在單元格中的位置。該屬性默認(rèn)值為stretch會(huì)讓內(nèi)容撐滿(mǎn)整個(gè)單元格的寬度。它還接受其他取值start將內(nèi)容對(duì)齊到單元格左側(cè)center將內(nèi)容對(duì)齊到單元格中央end將內(nèi)容對(duì)齊到單元格右側(cè)。這里值得強(qiáng)調(diào)的是默認(rèn)值stretch這一點(diǎn)在stretch狀態(tài)下網(wǎng)格項(xiàng)被拉伸到占滿(mǎn)整個(gè)單元格的水平空間因此start/center/end三種對(duì)齊效果是不可見(jiàn)的——只有先讓元素不再占滿(mǎn)單元格例如顯式設(shè)置對(duì)齊值單元格內(nèi)的對(duì)齊差異才會(huì)顯現(xiàn)。這也是為什么該挑戰(zhàn)要求把item2設(shè)為center而非其他值stretch時(shí)看不出區(qū)別center的效果最直觀。justify-self是單項(xiàng)級(jí)屬性寫(xiě)在哪個(gè)網(wǎng)格項(xiàng)上就只影響那一個(gè)項(xiàng)。它對(duì)應(yīng)的一對(duì)屬性是屬性作用級(jí)別作用軸justify-self單個(gè)網(wǎng)格項(xiàng)水平主軸方向上的 inline 方向align-self單個(gè)網(wǎng)格項(xiàng)垂直justify-items整個(gè)網(wǎng)格容器作用于所有項(xiàng)水平align-items整個(gè)網(wǎng)格容器作用于所有項(xiàng)垂直align-self的用法在緊隨其后的挑戰(zhàn) 5a90375238fddaf9a66b5d3b.md 中講解文檔明確指出它接受與justify-self完全相同的取值。3. 實(shí)戰(zhàn)挑戰(zhàn)的完整種子代碼與官方解法3.1 任務(wù)要求--instructions--部分的要求只有一句話(huà)使用justify-self屬性將類(lèi)名為item2的項(xiàng)在水平方向上居中。3.2 編輯器中的初始代碼--seed--提供了編輯器初始狀態(tài)這是一個(gè) 3 列 × 3 行的網(wǎng)格容器內(nèi)含 5 個(gè)彩色網(wǎng)格項(xiàng)style .item1 { background: LightSkyBlue; } .item2 { background: LightSalmon; /* Only change code below this line */ /* Only change code above this line */ } .item3 { background: PaleTurquoise; } .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這段種子代碼同時(shí)承載了前面 9 個(gè)挑戰(zhàn)學(xué)過(guò)的所有知識(shí)display: grid啟用網(wǎng)格布局第 1 個(gè)挑戰(zhàn)grid-template-columns: 1fr 1fr 1fr與grid-template-rows: 1fr 1fr 1fr用fr單位均分容器空間構(gòu)成 3×3 網(wǎng)格grid-gap: 10px行間隙與列間隙合并寫(xiě)法5 個(gè)項(xiàng)按源碼順序自動(dòng)填充到網(wǎng)格的 1、2、3、4、5 號(hào)單元格第二行左側(cè)留出的空位恰好能觀察stretch默認(rèn)行為——未設(shè)置對(duì)齊的項(xiàng)全部橫向撐滿(mǎn)單元格。注釋/* Only change code below this line */與/* Only change code above this line */之間是需要修改的區(qū)域這也是 freeCodeCamp 挑戰(zhàn)的標(biāo)準(zhǔn)交互約定改動(dòng)范圍被顯式圈定自動(dòng)測(cè)試只對(duì)該區(qū)域內(nèi)的差異敏感。3.3 官方參考答案--solutions--部分給出的完整解法只有兩行.item2 { justify-self: center; }即在.item2的規(guī)則中追加justify-self: center;。執(zhí)行后第二行中間的item2不再撐滿(mǎn)其所在單元格而是以?xún)?nèi)容寬度收縮并居中顯示與左右兩側(cè)保持stretch狀態(tài)的item1、item3形成鮮明對(duì)比。4. 自動(dòng)驗(yàn)收提示區(qū)中的正則斷言是如何工作的該挑戰(zhàn)的--hints--部分同時(shí)包含面向?qū)W習(xí)者的文字提示和面向自動(dòng)測(cè)試的斷言assert.match( code, /.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi );這條斷言對(duì)學(xué)員提交的完整代碼code做正則匹配逐段拆解其意圖片段含義.item2匹配類(lèi)選擇器中的item2前面的.匹配任意一個(gè)字符實(shí)際即選擇器點(diǎn)號(hào)\s*?{選擇器名與左花括號(hào)之間允許任意空白含換行[\s\S]*允許規(guī)則體內(nèi)存在任意順序、任意位置的其它聲明justify-self\s*?:\s*?center必須出現(xiàn)justify-self: center冒號(hào)前后允許空白\s*?;[\s\S]*}聲明以分號(hào)結(jié)束且整個(gè)規(guī)則體必須閉合gi標(biāo)志全局匹配且不區(qū)分大小寫(xiě)因此CENTER、Justify-Self等寫(xiě)法也能通過(guò)這條斷言的設(shè)計(jì)有幾個(gè)值得注意的工程細(xì)節(jié)順序無(wú)關(guān)[\s\S]*使得justify-self可以寫(xiě)在規(guī)則體內(nèi)任意位置也允許學(xué)員保留原有background聲明后再追加屬性大小寫(xiě)寬松i標(biāo)志讓 CSS 屬性/值的書(shū)寫(xiě)大小寫(xiě)差異不成為誤判CSS 屬性名本身大小寫(xiě)不敏感結(jié)構(gòu)約束要求完整的{ ... }規(guī)則體包裹避免學(xué)員在注釋或字符串里隨手寫(xiě)一句justify-self: center就能通過(guò)。同一目錄下的姊妹挑戰(zhàn)如 align-self 挑戰(zhàn) 中要求item3使用align-self: end采用了完全同構(gòu)的斷言寫(xiě)法說(shuō)明這是該教學(xué)區(qū)塊統(tǒng)一的測(cè)試范式每個(gè)挑戰(zhàn)一條類(lèi)選擇器 目標(biāo)聲明的正則驗(yàn)收目標(biāo)明確且可獨(dú)立運(yùn)行。5. 延伸與相鄰對(duì)齊屬性的關(guān)系理解justify-self后本區(qū)塊后續(xù)三個(gè)挑戰(zhàn)構(gòu)成自然的遞進(jìn)垂直方向單項(xiàng)對(duì)齊align-self5a90375238fddaf9a66b5d3b.md 中同樣以 3×3 網(wǎng)格為場(chǎng)景要求把item3垂直對(duì)齊到end文檔明確說(shuō)明其取值集合與justify-self完全一致start/center/end默認(rèn)stretch全體水平對(duì)齊justify-items寫(xiě)在容器上等價(jià)于給所有項(xiàng)設(shè)置justify-self全體垂直對(duì)齊align-items寫(xiě)在容器上等價(jià)于給所有項(xiàng)設(shè)置align-self。從優(yōu)先級(jí)關(guān)系看單項(xiàng)屬性justify-self/align-self寫(xiě)在網(wǎng)格項(xiàng)自身容器級(jí)屬性justify-items/align-items寫(xiě)在容器上當(dāng)兩者同時(shí)存在時(shí)項(xiàng)上的-self聲明覆蓋容器-items的聲明。本文挑戰(zhàn)中item2單獨(dú)居中、其余項(xiàng)維持stretch的效果正是這種單項(xiàng)覆蓋語(yǔ)義的直接體現(xiàn)。6. 小結(jié)justify-self控制單個(gè)網(wǎng)格項(xiàng)在其單元格內(nèi)的水平對(duì)齊取值為stretch默認(rèn)撐滿(mǎn)、start、center、end本挑戰(zhàn)5a90374338fddaf9a66b5d3a.md在 3 列 × 3 行的網(wǎng)格場(chǎng)景下要求為.item2追加justify-self: center;官方解法僅此一行聲明挑戰(zhàn)通過(guò)--hints--中一條大小寫(xiě)不敏感、聲明順序無(wú)關(guān)的正則斷言自動(dòng)驗(yàn)收斷言同時(shí)校驗(yàn)類(lèi)選擇器、屬性名、取值與規(guī)則體閉合結(jié)構(gòu)從 css-grid.json 可以看到該挑戰(zhàn)是css-grid區(qū)塊 23 個(gè)挑戰(zhàn)中的第 11 個(gè)承上grid-column/grid-row 定位啟下align-self 與-items系列對(duì)齊是定位 → 對(duì)齊知識(shí)鏈條的轉(zhuǎn)折點(diǎn)所有挑戰(zhàn)文件均受 challenge-schema.js 定義的 Joi schema 約束front matter 中challengeType: 0對(duì)應(yīng) challenge-types.ts 中的html類(lèi)型保證了課程內(nèi)容在結(jié)構(gòu)與類(lèi)型層面的可校驗(yàn)性。【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 freeCodeCamp 課程解析：用 CSS Grid 的 justify-self 在單元格內(nèi)水平對(duì)齊網(wǎng)格項(xiàng)
freeCodeCamp 課程解析用 CSS Grid 的 justify-self 在單元格內(nèi)水平對(duì)齊網(wǎng)格項(xiàng)【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 課程庫(kù)中《Align an Item Horizontally using justify-self》挑戰(zhàn)文檔展開(kāi)講解 CSS Grid 中justify-self屬性如何控制單個(gè)網(wǎng)格項(xiàng)在其單元格cell內(nèi)的水平位置并結(jié)合該挑戰(zhàn)的完整種子代碼、官方參考答案以及 freeCodeCamp 挑戰(zhàn)文件的結(jié)構(gòu)與校驗(yàn)機(jī)制幫助讀者既掌握這一屬性本身的用法也理解它在課程體系中是如何被組織、測(cè)試與驗(yàn)收的。1. 挑戰(zhàn)定位課程結(jié)構(gòu)與文件組織該挑戰(zhàn)文檔位于英文課程curriculum的 CSS Grid 教學(xué)區(qū)塊中挑戰(zhàn)正文5a90374338fddaf9a66b5d3a.md區(qū)塊編排css-grid.json從 css-grid.json 的challengeOrder數(shù)組可以看到css-grid區(qū)塊共有 23 個(gè)挑戰(zhàn)本挑戰(zhàn)id5a90374338fddaf9a66b5d3a排在第 11 位。其前后文脈絡(luò)非常清晰... Use grid-column to Control Spacing 控制橫向跨列 Use grid-row to Control Spacing 控制縱向跨行 Align an Item Horizontally using justify-self ← 本文主角 Align an Item Vertically using align-self Align All Items Horizontally using justify-items Align All Items Vertically using align-items ...也就是說(shuō)課程先教占哪幾列/幾行再教在格子里怎么對(duì)齊先單項(xiàng)-self后全體-items符合由點(diǎn)及面的教學(xué)設(shè)計(jì)。該區(qū)塊在證書(shū)結(jié)構(gòu) responsive-web-design.json 中列于superblockChapters的末尾緊接在css-flexbox之后是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)認(rèn)證中 Flexbox 之后的第二個(gè)布局專(zhuān)題。1.1 挑戰(zhàn)文件的 Front Matter每個(gè)挑戰(zhàn)是一個(gè)帶 YAML front matter 的 Markdown 文件。本挑戰(zhàn)的頭部元數(shù)據(jù)為id: 5a90374338fddaf9a66b5d3a title: Align an Item Horizontally using justify-self challengeType: 0 videoUrl: https://scrimba.com/p/pByETK/cJbpKHq forumTopicId: 301122 dashedName: align-an-item-horizontally-using-justify-self其中challengeType: 0表示這是一個(gè) HTML/CSS 挑戰(zhàn)。這一點(diǎn)可以從共享包中的挑戰(zhàn)類(lèi)型定義得到印證——在 challenge-types.ts 中const html 0即編號(hào) 0 對(duì)應(yīng) HTML 挑戰(zhàn)類(lèi)型1 為 JS、2 為后端等。dashedName則是 URL 友好的短名稱(chēng)與挑戰(zhàn)文件同目錄下的文件命名以 id 為文件名形成目錄結(jié)構(gòu) 短名定位的雙索引方式。正文部分由約定的小節(jié)標(biāo)記組織# --description--講解、# --instructions--任務(wù)要求、# --hints--提示與自動(dòng)測(cè)試斷言、# --seed--編輯器種子代碼、# --solutions--參考答案。這些標(biāo)記會(huì)被課程構(gòu)建流程解析并在 challenge-schema.js 的 Joi schema 約束下完成校驗(yàn)保證每個(gè)挑戰(zhàn)文件的結(jié)構(gòu)完整、字段合法——從源碼結(jié)構(gòu)看整個(gè) curriculum 目錄下的 1.6 萬(wàn)多個(gè)挑戰(zhàn) Markdown 文件都依賴(lài)這套 schema 做質(zhì)量把關(guān)。2. 核心知識(shí)點(diǎn)justify-self 與單元格cell文檔正文--description--部分給出的完整定義如下在 CSS Grid 中每個(gè)網(wǎng)格項(xiàng)的內(nèi)容都位于一個(gè)被稱(chēng)為**單元格cell**的盒子內(nèi)?？梢栽诰W(wǎng)格項(xiàng)上使用justify-self屬性水平控制內(nèi)容在單元格中的位置。該屬性默認(rèn)值為stretch會(huì)讓內(nèi)容撐滿(mǎn)整個(gè)單元格的寬度。它還接受其他取值start將內(nèi)容對(duì)齊到單元格左側(cè)center將內(nèi)容對(duì)齊到單元格中央end將內(nèi)容對(duì)齊到單元格右側(cè)。這里值得強(qiáng)調(diào)的是默認(rèn)值stretch這一點(diǎn)在stretch狀態(tài)下網(wǎng)格項(xiàng)被拉伸到占滿(mǎn)整個(gè)單元格的水平空間因此start/center/end三種對(duì)齊效果是不可見(jiàn)的——只有先讓元素不再占滿(mǎn)單元格例如顯式設(shè)置對(duì)齊值單元格內(nèi)的對(duì)齊差異才會(huì)顯現(xiàn)。這也是為什么該挑戰(zhàn)要求把item2設(shè)為center而非其他值stretch時(shí)看不出區(qū)別center的效果最直觀。justify-self是單項(xiàng)級(jí)屬性寫(xiě)在哪個(gè)網(wǎng)格項(xiàng)上就只影響那一個(gè)項(xiàng)。它對(duì)應(yīng)的一對(duì)屬性是屬性作用級(jí)別作用軸justify-self單個(gè)網(wǎng)格項(xiàng)水平主軸方向上的 inline 方向align-self單個(gè)網(wǎng)格項(xiàng)垂直justify-items整個(gè)網(wǎng)格容器作用于所有項(xiàng)水平align-items整個(gè)網(wǎng)格容器作用于所有項(xiàng)垂直align-self的用法在緊隨其后的挑戰(zhàn) 5a90375238fddaf9a66b5d3b.md 中講解文檔明確指出它接受與justify-self完全相同的取值。3. 實(shí)戰(zhàn)挑戰(zhàn)的完整種子代碼與官方解法3.1 任務(wù)要求--instructions--部分的要求只有一句話(huà)使用justify-self屬性將類(lèi)名為item2的項(xiàng)在水平方向上居中。3.2 編輯器中的初始代碼--seed--提供了編輯器初始狀態(tài)這是一個(gè) 3 列 × 3 行的網(wǎng)格容器內(nèi)含 5 個(gè)彩色網(wǎng)格項(xiàng)style .item1 { background: LightSkyBlue; } .item2 { background: LightSalmon; /* Only change code below this line */ /* Only change code above this line */ } .item3 { background: PaleTurquoise; } .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這段種子代碼同時(shí)承載了前面 9 個(gè)挑戰(zhàn)學(xué)過(guò)的所有知識(shí)display: grid啟用網(wǎng)格布局第 1 個(gè)挑戰(zhàn)grid-template-columns: 1fr 1fr 1fr與grid-template-rows: 1fr 1fr 1fr用fr單位均分容器空間構(gòu)成 3×3 網(wǎng)格grid-gap: 10px行間隙與列間隙合并寫(xiě)法5 個(gè)項(xiàng)按源碼順序自動(dòng)填充到網(wǎng)格的 1、2、3、4、5 號(hào)單元格第二行左側(cè)留出的空位恰好能觀察stretch默認(rèn)行為——未設(shè)置對(duì)齊的項(xiàng)全部橫向撐滿(mǎn)單元格。注釋/* Only change code below this line */與/* Only change code above this line */之間是需要修改的區(qū)域這也是 freeCodeCamp 挑戰(zhàn)的標(biāo)準(zhǔn)交互約定改動(dòng)范圍被顯式圈定自動(dòng)測(cè)試只對(duì)該區(qū)域內(nèi)的差異敏感。3.3 官方參考答案--solutions--部分給出的完整解法只有兩行.item2 { justify-self: center; }即在.item2的規(guī)則中追加justify-self: center;。執(zhí)行后第二行中間的item2不再撐滿(mǎn)其所在單元格而是以?xún)?nèi)容寬度收縮并居中顯示與左右兩側(cè)保持stretch狀態(tài)的item1、item3形成鮮明對(duì)比。4. 自動(dòng)驗(yàn)收提示區(qū)中的正則斷言是如何工作的該挑戰(zhàn)的--hints--部分同時(shí)包含面向?qū)W習(xí)者的文字提示和面向自動(dòng)測(cè)試的斷言assert.match( code, /.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi );這條斷言對(duì)學(xué)員提交的完整代碼code做正則匹配逐段拆解其意圖片段含義.item2匹配類(lèi)選擇器中的item2前面的.匹配任意一個(gè)字符實(shí)際即選擇器點(diǎn)號(hào)\s*?{選擇器名與左花括號(hào)之間允許任意空白含換行[\s\S]*允許規(guī)則體內(nèi)存在任意順序、任意位置的其它聲明justify-self\s*?:\s*?center必須出現(xiàn)justify-self: center冒號(hào)前后允許空白\s*?;[\s\S]*}聲明以分號(hào)結(jié)束且整個(gè)規(guī)則體必須閉合gi標(biāo)志全局匹配且不區(qū)分大小寫(xiě)因此CENTER、Justify-Self等寫(xiě)法也能通過(guò)這條斷言的設(shè)計(jì)有幾個(gè)值得注意的工程細(xì)節(jié)順序無(wú)關(guān)[\s\S]*使得justify-self可以寫(xiě)在規(guī)則體內(nèi)任意位置也允許學(xué)員保留原有background聲明后再追加屬性大小寫(xiě)寬松i標(biāo)志讓 CSS 屬性/值的書(shū)寫(xiě)大小寫(xiě)差異不成為誤判CSS 屬性名本身大小寫(xiě)不敏感結(jié)構(gòu)約束要求完整的{ ... }規(guī)則體包裹避免學(xué)員在注釋或字符串里隨手寫(xiě)一句justify-self: center就能通過(guò)。同一目錄下的姊妹挑戰(zhàn)如 align-self 挑戰(zhàn) 中要求item3使用align-self: end采用了完全同構(gòu)的斷言寫(xiě)法說(shuō)明這是該教學(xué)區(qū)塊統(tǒng)一的測(cè)試范式每個(gè)挑戰(zhàn)一條類(lèi)選擇器 目標(biāo)聲明的正則驗(yàn)收目標(biāo)明確且可獨(dú)立運(yùn)行。5. 延伸與相鄰對(duì)齊屬性的關(guān)系理解justify-self后本區(qū)塊后續(xù)三個(gè)挑戰(zhàn)構(gòu)成自然的遞進(jìn)垂直方向單項(xiàng)對(duì)齊align-self5a90375238fddaf9a66b5d3b.md 中同樣以 3×3 網(wǎng)格為場(chǎng)景要求把item3垂直對(duì)齊到end文檔明確說(shuō)明其取值集合與justify-self完全一致start/center/end默認(rèn)stretch全體水平對(duì)齊justify-items寫(xiě)在容器上等價(jià)于給所有項(xiàng)設(shè)置justify-self全體垂直對(duì)齊align-items寫(xiě)在容器上等價(jià)于給所有項(xiàng)設(shè)置align-self。從優(yōu)先級(jí)關(guān)系看單項(xiàng)屬性justify-self/align-self寫(xiě)在網(wǎng)格項(xiàng)自身容器級(jí)屬性justify-items/align-items寫(xiě)在容器上當(dāng)兩者同時(shí)存在時(shí)項(xiàng)上的-self聲明覆蓋容器-items的聲明。本文挑戰(zhàn)中item2單獨(dú)居中、其余項(xiàng)維持stretch的效果正是這種單項(xiàng)覆蓋語(yǔ)義的直接體現(xiàn)。6. 小結(jié)justify-self控制單個(gè)網(wǎng)格項(xiàng)在其單元格內(nèi)的水平對(duì)齊取值為stretch默認(rèn)撐滿(mǎn)、start、center、end本挑戰(zhàn)5a90374338fddaf9a66b5d3a.md在 3 列 × 3 行的網(wǎng)格場(chǎng)景下要求為.item2追加justify-self: center;官方解法僅此一行聲明挑戰(zhàn)通過(guò)--hints--中一條大小寫(xiě)不敏感、聲明順序無(wú)關(guān)的正則斷言自動(dòng)驗(yàn)收斷言同時(shí)校驗(yàn)類(lèi)選擇器、屬性名、取值與規(guī)則體閉合結(jié)構(gòu)從 css-grid.json 可以看到該挑戰(zhàn)是css-grid區(qū)塊 23 個(gè)挑戰(zhàn)中的第 11 個(gè)承上grid-column/grid-row 定位啟下align-self 與-items系列對(duì)齊是定位 → 對(duì)齊知識(shí)鏈條的轉(zhuǎn)折點(diǎn)所有挑戰(zhàn)文件均受 challenge-schema.js 定義的 Joi schema 約束front matter 中challengeType: 0對(duì)應(yīng) challenge-types.ts 中的html類(lèi)型保證了課程內(nèi)容在結(jié)構(gòu)與類(lèi)型層面的可校驗(yàn)性。【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考