"Layout"
- 視覺對齊用單一真實來源
視覺對齊的本質是『同一條基準線在多個元素上重現』 — 任何元素的尺寸沒有來源明確的數字,整條線都靠不住。本文說明 CSS 變數 + 必要時 ResizeObserver 寫回,讓多處引用同一個值。
- 量測值缺一不可:依賴未測量值會錯位
對齊本質是『同一條基準線在多個元素上重現』 — 任何一個元素的高度沒有確定值、整條線都靠不住。本文展開『把對齊問題當線性方程組』的角度。
- 置中元件與絕對定位元件並存:用疊層而非排擠
中央欄需要置中、側邊元件需要指定位置 — 兩者要共存,關鍵是讓側邊元件用 absolute 跳出 layout 流,中央欄完全感知不到它。本文展開疊層式並存的設計。
- 同一個元件在三種互動狀態下顯示位置不同的 root cause
當元件「跟著狀態飄」、不同互動狀態下出現在不同位置 — 不是元件本身的問題,是它依賴的『定位錨點』本身在動。本文以 scope UI 三狀態飄移為例,展開錨點分析法。
- U.C16 篩選列截斷被讀成遮蔽 — 水平溢出沒有捲動提示
水平清單超出畫面寬度、使用者回報「被別的元件蓋住」或找不到後面的選項時使用。截斷若無 affordance(漸層、部分露出、箭頭),使用者讀到的是「壞了」不是「可以捲」
- U.C19 「已選擇」計數被版面擠壓成省略號 — 回饋死在 layout
狀態文字顯示成「...」、資料層查起來卻一切正常 — 回饋鏈的最後一哩是版面,flex 寬度競爭把關鍵計數整串壓成省略號,state 正確、使用者拿到零資訊
- 溢出 714px、22 個測試同時紅 — 單點修復與規範化的分界
Row 裡未受 Flexible 包裹的固定尺寸元件在窄約束下溢出;同型失敗一次爆 22 個時,正確的產出不是 22 個修復、是一份 overflow 預防規範(反模式清單 + 決策樹 + 測試檢查項)。含測試環境小尺寸是 feature、以及 stale ticket 先考古再執行的教訓。