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