タグ: CSS | 次世代 Hugo

實現滿版背景與水平垂直置中 Slogan

滿版背景加上水平垂直置中 Slogan 是首頁常見 Layout，可使用 Flexbox 或 margin: auto 完成。

2021-02-26

若 Box 有設定 Height，此時 Flex Line 由 Box Height 決定，可使用 margin: auto 動態調整 Margin。

2021-02-24

Flexbox 的 align-items 是依照 flex line 概念所控制，有其在自動換列時特別重要。

2021-02-23

align-items 在沒有換列時比較看不出其意義，在換列下可明確感受其本質。

2021-02-23

justify-content 可決定 Main Axis 對齊，若想控制 Cross Axis 對齊，則可使用 align-items。

2021-02-22

Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上是由 flex-direction Property 決定 Main Axis 排列方向。

2021-02-22

Flexbox 的優點之一是只要設定 flex-wrap 就支援自動換列換行，適合 RWD 排版。

2021-02-22

word-break 專門針對文字換行處理，但中英文處理不太一樣。

2021-02-20

Browser 預設對於 white space 會加以合併，且 寬度不足 時自動換行，若想改變這些預設行為，就要設定 white-space。

2021-02-20

由 API 所回傳的資料可能過長而換行顯示，但有時我們不希望換行影響版面，而想直接在該行截斷 String 加上 ... 即可，當然可以使用 JavaScript 處理，但隨著 RWD 寬度改變，JavaScript 將面臨挑戰，比較好的方式是使用 CSS 解決。

2021-02-20