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

推薦閱讀

活動快訊 - 打造您的品牌商務生態圈 with Isobar / Shopify / LINE
活動快訊 - 打造您的品牌商務生態圈 with Isobar / Shopify / LINE
全通路行銷很困難?! Martech 太花錢?! Isobar 為您展現如何結合 LINE 與 Shopify,以科技創意應用快速把粉絲變顧客,成就品牌商務體驗的最後一哩 活動時間:2022/4/7 活動地點:台北市松仁路100號9樓...
繼續閱讀
【重點分享包】我多久得到我的第一個 Youtube 一萬訂閱
【重點分享包】我多久得到我的第一個 Youtube 一萬訂閱
本文重點整理 SEO 神器: Ubersuggest 的創辦人分享的 Youtube 三個戰術,希望對經營 Youtube 的品牌有幫助。 我到底花了多久呢?八個月,因為我試了無數的方法,這裏分享三個沒人討論過的初期策略,讓你能夠比...
繼續閱讀
怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
掌握技巧,才有機會做出成果   一直以來,電子郵件營銷是很多企業或者個人推廣業務的重要手段,而隨著各電子郵箱服務商和服務器提供商對垃圾郵件的過濾機制越來越嚴格,營銷人員的工作也越來越具有挑戰性。 為了避免我們的郵件進入垃圾箱,...
繼續閱讀

leave a message

Please note that comments must be reviewed before they are published