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

推薦閱讀

關鍵字研究 - 幫助您排名更高的深入指南
關鍵字研究 - 幫助您排名更高的深入指南
* 本篇由 similarweb 提供,UBSO 翻譯 關鍵字研究可以幫助您有效地吸引更多受眾。通過準確了解他們正在搜索的內容,您可以創建有針對性的內容來滿足他們的需求。但是,為了最大化您的影響,您需要使用最準確的關鍵字研究工具採取系...
繼續閱讀
Selly:提升您的Shopify商店銷售和客戶滿意度的強大應用程序
Selly:提升您的Shopify商店銷售和客戶滿意度的強大應用程序
在這篇部落格文章中,我們將探討一個非常受歡迎的Shopify應用程序 - Selly。這款應用程序為您的電子商務商店提供了一個強大的功能集,以提高銷售額和客戶滿意度。讓我們一起來了解Selly如何幫助您的Shopify商店實現更好的成...
繼續閱讀
在 Shopify 後台上傳和管理檔案
在 Shopify 後台上傳和管理檔案
和一般電商開店建站SAAS系統不一樣,Shopify 完全不限制網站流量、圖片限制、更沒有限制產品 SKU 數目。除了基本的使用月費 (台幣 600 起)以為,收交易手續費 0.5%~2%的手續費,跟其他平台動輒 5% 相比更是非常親...
繼續閱讀

leave a message

Please note that comments must be reviewed before they are published