實現滿版背景與水平垂直置中 Slogan
滿版背景加上水平垂直置中 Slogan 是首頁常見 Layout,可使用 Flexbox 或 margin: auto 完成。
滿版背景加上水平垂直置中 Slogan 是首頁常見 Layout,可使用 Flexbox 或 margin: auto 完成。
若 Box 有設定 Height,此時 Flex Line 由 Box Height 決定,可使用 margin: auto 動態調整 Margin。
Flexbox 的 align-items 是依照 flex line 概念所控制,有其在自動換列時特別重要。
align-items 在沒有換列時比較看不出其意義,在換列下可明確感受其本質。
justify-content 可決定 Main Axis 對齊,若想控制 Cross Axis 對齊,則可使用 align-items。
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列,事實上是由 flex-direction Property 決定 Main Axis 排列方向。
Flexbox 的優點之一是只要設定 flex-wrap 就支援自動換列換行,適合 RWD 排版。
word-break 專門針對文字換行處理,但中英文處理不太一樣。
Browser 預設對於 white space 會加以合併,且 寬度不足 時自動換行,若想改變這些預設行為,就要設定 white-space。
由 API 所回傳的資料可能過長而換行顯示,但有時我們不希望換行影響版面,而想直接在該行截斷 String 加上 ... 即可,當然可以使用 JavaScript 處理,但隨著 RWD 寬度改變,JavaScript 將面臨挑戰,比較好的方式是使用 CSS 解決。