使用 align-content 在 Cross Axis 對齊
在 Cross Axis 處理對齊除了 align-items 外,尚有 align-content,兩者非常接近,唯 align-items 是處理 Item 對於 Flex Line,而 align-content 是處理 Flex Line 對於 Box。
在 Cross Axis 處理對齊除了 align-items 外,尚有 align-content,兩者非常接近,唯 align-items 是處理 Item 對於 Flex Line,而 align-content 是處理 Flex Line 對於 Box。
各自向左右兩側對齊為實務上常見需求,CSS 可由多種方式實現。
除了能使用 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。