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

推薦閱讀

Google 宣布與 Shopify 合作擴展電商業務,將如何影響電商品牌?
Google 宣布與 Shopify 合作擴展電商業務,將如何影響電商品牌?
Google 在今年度(2021)Google I/O 大會中宣布與網路開店平台 Shopify 合作,讓 Shopify 上超過 1700 萬間商家能通過 Google 搜尋和其他服務觸及消費者。 Shopify 商家擴展銷售管道如...
繼續閱讀
利用 Shopify 開啟你的全球商店 — 2021最新更新
利用 Shopify 開啟你的全球商店 — 2021最新更新
隨Covid-19疫情延燒,2020年全球網路零售銷售額超過4兆美元,年成長率達27.6%。全球網路零售市場規模持續擴大中 最近開店平台越來越多,如果有意將您的商品賣至海外,要怎麼選擇呢? 以下比較了Shopify與近期最熱門的SH...
繼續閱讀
台灣電商適合用Shopify嗎?2021台灣品牌Shopify開店成功案例
台灣電商適合用Shopify嗎?2021台灣品牌Shopify開店成功案例
Image source: Shopify TW Shopify可說是歐美地區,甚至全球最熱門的網路開店平台,特斯拉都曾選用Shopify開店!但它好不一定就適合我們,在台灣做電商網站的品牌,羨慕著Shopify網站的設計和功能高度開...
繼續閱讀