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

推薦閱讀

Sales in Taiwan - Shopify E-commerce Official Website Gold Logistics Plan Comparison
Sales in Taiwan - Shopify E-commerce Official Website Gold Logistics Plan Comparison
Shopify is loved by many domestic and foreign merchants for its rich functions, but for many Taiwanese brands, the mo...
繼續閱讀
How will Google's announcement to expand its e-commerce business with Shopify affect e-commerce brands?
How will Google's announcement to expand its e-commerce business with Shopify affect e-commerce brands?
Google announced at this year's (2021) Google I/O conference that it is partnering with the online store platform ...
繼續閱讀
Start Your Global Store with Shopify - Latest Update 2021
Start Your Global Store with Shopify - Latest Update 2021
With the spread of the Covid-19 epidemic, global online retail sales in 2020 exceeded US$4 trillion, with an annual g...
繼續閱讀