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

推薦閱讀

怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
怎麼避免品牌的郵件、Marketing Email 進入垃圾郵件夾?
掌握技巧,才有機會做出成果   一直以來,電子郵件營銷是很多企業或者個人推廣業務的重要手段,而隨著各電子郵箱服務商和服務器提供商對垃圾郵件的過濾機制越來越嚴格,營銷人員的工作也越來越具有挑戰性。 為了避免我們的郵件進入垃圾箱,...
繼續閱讀
Shopify allows merchants to accept bitcoin payments, how does this benefit brands?
Shopify allows merchants to accept bitcoin payments, how does this benefit brands?
What is Bitcoin? Bitcoin is the first virtual currency (also known as cryptocurrency) to be launched, and it is curr...
繼續閱讀
How much will it cost to build an online store/official website with Shopify in 2022? Hidden costs? General arrangement of store opening costs (Part 1)
How much will it cost to build an online store/official website with Shopify in 2022? Hidden costs? General arrangement of store opening costs (Part 1)
This year, many Taiwanese e-commerce brands want to use Shopify to build their website. Shopify is well-known for its...
繼續閱讀

leave a message

Please note that comments must be reviewed before they are published