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

推薦閱讀

為什麼 B2B 電商一定要選Shopify?利用強大的功能輕鬆提升業務
為什麼 B2B 電商一定要選Shopify?利用強大的功能輕鬆提升業務
無論台灣或世界各地,至今 2024 年,還有許多經營多年的 B2B 貿易公司和批發商仍靠著比較傳統的方式經營,從採購、銷售、倉管,到顧客管理,都需要大量人工支持企業運作。而隨著業務發展,越來越多的 B2B 企業開始尋求線上平台來提高擴...
繼續閱讀
SGE 時代 SEO 新篇章:掌握搜尋生成體驗,解鎖 Google 排名新格局
SGE 時代 SEO 新篇章:掌握搜尋生成體驗,解鎖 Google 排名新格局
Google 搜尋生成體驗(SGE)的推出,無疑為搜尋引擎優化(SEO)領域投下了一顆震撼彈。這個 AI 驅動的搜尋新功能,在搜尋結果頁面(SERP)頂部生成摘要,直接回應使用者查詢,並提供相關主題和深入研究的連結,徹底改變了我們熟悉...
繼續閱讀
探索便捷通知的世界:Notification Pro
探索便捷通知的世界:Notification Pro
大家好,今天 UBSO 要為大家呈現一款十分好用的 App — Notification Pro。 它不僅能夠幫助您輕鬆地向使用者或客戶發送通知,還具有簡潔易用的功能,讓您可以輕鬆管理通知內容,現在就讓我們一起來探索這款 App 的功...
繼續閱讀

發表留言

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