LESSON-07 · TOPIC 02
能拆讀 flex shorthand 的 grow、shrink、basis，並預測剩餘與不足空間如何分配。
能拆讀 flex shorthand 的 grow、shrink、basis，並預測剩餘與不足空間如何分配。
只寫 flex:1 卻不理解三值，容易讓內容在寬版比例失衡，或在窄版因 shrink/basis 判斷錯誤而擠壓。
要修改的檔案：files/starter/style.css
定位：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。｜依 starter-2 定位，只修改「flex-grow、shrink、basis」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
三張服務卡中推薦卡要吃剩餘空間並保留 12rem 基準，其他卡可在不足時縮小。
起始狀態：featured item 使用 flex:0 1 auto，沒有伸展比例與明確 basis。
runtime 的 flex 由 0 1 auto 改為包含 grow=1、shrink=0、basis=192px 的三值；人工比較卡片寬度變化。
驗收證據：runtime before 包含 0 1 auto；after 包含 1 0 與 192px；property=flex
同一 Flex row 的卡片需要依比例伸展、保護某張卡不縮，或設定分配基準時。
常見混淆：flex-basis 不等於永遠的最終 width；內容、min/max size 與 free space distribution 都可能改變 used main size。
這段程式是理解起點，不是要你直接跳過 Starter。
grow 決定有多的空間怎麼分，shrink 決定不夠時怎麼縮，basis 是分配前的起始尺寸。
正式說法：flex-grow is a positive free-space factor；flex-shrink is a negative free-space factor；flex-basis defines the initial main size before free space distribution。
.featured{flex:1 0 12rem}.regular{flex:0 1 10rem}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。。
檔案：files/starter/style.css 定位：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。
要做：執行實驗替 featured item 切換 flex-distribution class，讀取 computed flex shorthand。
預期：runtime 的 flex 由 0 1 auto 改為包含 grow=1、shrink=0、basis=192px 的三值；人工比較卡片寬度變化。
證據：runtime before 包含 0 1 auto；after 包含 1 0 與 192px；property=flex
卡住先查：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。
檔案：files/starter/style.css 定位：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 flex 由 0 1 auto 改為包含 grow=1、shrink=0、basis=192px 的三值；人工比較卡片寬度變化。
證據：runtime before 包含 0 1 auto；after 包含 1 0 與 192px；property=flex
卡住先查：在 Computed 展開 flex，分別記錄 flex-grow、flex-shrink、flex-basis。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
依序讀三值：grow、shrink、basis。
推薦卡設定 flex:1 0 12rem，代表可長、不縮、12rem 起算。
完整解答與原因：grow=1 參與剩餘空間；shrink=0 不參與不足空間縮減；basis=12rem 在 16px 根字級下 computed 為 192px。