Flexbox 立即上手:flex-direction, justify-content, align-items 及 align-content 說明

基礎

了解 flex-direction 以及 justify-content

flex-direction

可以先了解 row 及 column。選 row 的話排起來是橫的,從左到右排列;選 

column 的話是行(英文的話比較好記憶因為 column 是柱子),從上到下排列。

justify-content

設定好 flex-direction 後,就可以來了解 justify-content

如果是 flex-direction 是

  • Row 的話
    • 從右開始排是 flex-start
    • 從左是 flex-end
  • Column 的話
    • 從上是 flex-start
    • 從下是 flex-end

以上都很直覺,

使用 https://the-echoplex.net/flexyboxes/ 玩一下即可上手!

中階

介紹 align-items

align-items

align-items 是用了調整在每個 items 排排站好之後,該 item 會在他的位置上會靠前、靠後、還是置中。

例如使用 flex-direction: column,來讓 items 從上到下排列;使用 justify-content: flex-end 來讓全部 items 至底之後,可以使用 align-items 來將 items 左右至中,可以想像成一般 Words 或其他文字編輯起中的放置。

進階

介紹 align-content

align-content

align-content 用來定義多行的時候怎麼分配工具。如果這個 flex-container 只有一行,沒有 wrap 的話就無效。

了解這些之後就可以看懂官方使用主軸線的說明:

  • Row 的話,主軸線是水平線
  • Column,主軸線是垂直線

justify-content 是排列 item 在主軸線上的位置

align-items 是排列 item 在主軸線的垂直線上的位置

align-content 是在有多個主軸線的時候,主軸線彼此之間的排列

flex心智圖-來源https://www.jianshu.com/p/56e3bfd6e0b6

推薦閱讀

探索便捷通知的世界:Notification Pro
探索便捷通知的世界:Notification Pro
大家好,今天 UBSO 要為大家呈現一款十分好用的 App — Notification Pro。 它不僅能夠幫助您輕鬆地向使用者或客戶發送通知,還具有簡潔易用的功能,讓您可以輕鬆管理通知內容,現在就讓我們一起來探索這款 App 的功...
繼續閱讀
Figma的Dev Mode:開發者的全新聖地
Figma的Dev Mode:開發者的全新聖地
引言 對於網站和應用開發者來說,將設計快速且準確地轉換為程式碼一直是一個挑戰。Figma 最近推出了一個名為“Dev Mode”的全新功能區,這個功能專為開發者設計,能夠有效地幫助你將設計快速轉為程式碼。本文將深入解析 Dev Mod...
繼續閱讀
為你的電商帳號增添保護層:兩步驗證應用程式的比較與推薦
為你的電商帳號增添保護層:兩步驗證應用程式的比較與推薦
作為一個電商老闆或行銷主管,你可能經常在各種平台上管理多個帳號。這些帳號涉及的資訊可能包括消費者的個資、商品價格、後台數據等。在處理這些敏感資訊的過程中,妥善的帳號管理成為了必須面對的課題,這時候,兩步驗證變得尤其重要。 兩步驗證是一...
繼續閱讀

發表留言

請注意,留言須先通過審核才會發佈