CSS 工作流程
Flexbox 尺寸、換行與來源順序
Flexbox 沿單一主軸排列項目。即時預覽能幫助理解規則；實際結果仍受文字、內容固有尺寸與外層容器影響。
內容更新： · 維護者與修正回報
先分清主軸與交叉軸
flex-direction 決定主軸。justify-content 分配主軸上的可用空間；align-items 在交叉軸對齊項目。容器寬高不同時，row 與 column 的結果也不同。
項目需要進入下一行時才使用 flex-wrap。改變預覽寬度只是在測試，不會產生響應式斷點或 media query。
一起看 grow、shrink 與 basis
flex-basis 是主軸上的起始尺寸；flex-grow 分配多餘空間，flex-shrink 處理空間不足。結果仍受內容固有尺寸、最小尺寸與可用空間影響，相同數值不保證畫面寬度相等。
產生器接受 0–8 的 grow／shrink 整數，以及 auto 或 0–600px 的 basis。這是編輯範圍，不是 CSS 限制。請在目的版面測試長字詞、圖片與實際最小尺寸。
確認對齊何時生效
align-content 在交叉軸分配多行空間；單行 Flex 容器不會受它影響。即使換行，也要有交叉軸剩餘空間才容易看出差異。項目若先以 flex-grow 用完主軸空間，justify-content 也可能看不出效果。
預覽以固定測試寬高協助觀察；複製的 CSS 不含測試尺寸與示例卡片外觀。回到專案後，請用實際容器及內容重試。
讓來源順序符合內容意義
row-reverse 與 column-reverse 反轉視覺方向；wrap-reverse 反轉換行堆疊的位置。它們都不改變 HTML 來源順序，朗讀與循序鍵盤導覽仍依此順序。不要用視覺反向排列修補來源順序錯誤。
工具刻意不提供拖放重排、order、巢狀 Flex 容器或儲存專案。請先在不套用 CSS 時檢查複製的 HTML，再以鍵盤導覽、縮放與窄螢幕測試。
.layout { display: flex; flex-wrap: wrap; gap: 16px; }
.layout > .item { flex: 1 1 160px; }資料可信度