使用 align-content center 垂直置中
除了能使用 align-items: center 垂直置中外,事實上也能使用 flex-wrap: wrap 搭配 align-content: center 垂直置中。
除了能使用 align-items: center 垂直置中外,事實上也能使用 flex-wrap: wrap 搭配 align-content: center 垂直置中。
Flexbox 的 align-items 預設為 stretch,這也使得 Flexbox 可自動 stretch 子層 item 使其等高。
display: flex 與 display: inline-flex 對其子層 Item 都能使用 Flexbox,但對父層 Box 本身處理則不同,flex 會維持 Block,而 inline-flex 會成為 Inline。
ECMAScript Object 的 Property 基本上是由 Key / Value 構成,連 Method 也是廣義 Property,我們該如何取得 Object 的所有 Key 呢 ?
Flexbox 的 align-items 與 align-content 非常類似,都是在處理 Cross Axis 對齊,事實上兩者並不違背,還可一起使用。
滿版背景加上水平垂直置中 Slogan 是首頁常見 Layout,可使用 Flexbox 或 margin: auto 完成。
若要將 Object 的所有 Key 轉成 Array,可使用 Object.keys()。
若 Box 有設定 Height,此時 Flex Line 由 Box Height 決定,可使用 margin: auto 動態調整 Margin。
Flexbox 的 align-items 是依照 flex line 概念所控制,有其在自動換列時特別重要。
align-items 在沒有換列時比較看不出其意義,在換列下可明確感受其本質。