タグ: CSS | 次世代 Hugo

使用 Fixed Position 實現 Layout

藉由 Fixed Position 與 top、bottom、left 、right 與 margin: auto 靈活運用，可以排出很多特殊 Layout。

2021-03-14

實務上常看到的蓋板廣告、回到頁面頂端，固定顯示在頁面的 Navbar … 等，都是使用 Fixed Position 實現。

2021-03-10

Card 為目前很流行 Layout，因為可針對不同 Device 寬度輕易 RWD 改變。

2021-03-08

雖然 flex-grow、flex-shrink 與 flex-basis 為 3 個獨立 property，但實務上常使用 flex 一次設定。

2021-03-08

傳統會使用 width 與 height 設定子層 Item 寬度，但 Flexbox 另外提出了 flex-basis 設定 Main Axis 的子層寬度。

2021-03-08

若子層 Item 總 Width 大於父層 Box，卻沒有啟動換列，可設定 flex-shrink 是否自動啟動收縮。

2021-03-08

若想設定 Element 的長寬比，無論 Width 怎麼改變，Browser 會自動根據 Width 計算出 Height，可使用 Chrome 88 新支援的 aspect-ratio。

2021-03-08

若想在父層 Box 直接設定子層 Item 間隔，且不包含首項與末項，可使用 gap 設定。

2021-03-08

若要子層 Item 寬度依照比例分配，直覺會從 width 下手，事實上也可以使用 flex-grow 實現。

2021-03-07

若父層 Box 寬度大於所有子層 Item 總和，可使用 flex-grow 設定如何分配剩餘寬度給子層 Item。

2021-03-07