2020-05-12|閱讀時間 ‧ 約 5 分鐘

設計師的RWD網頁排版 — Grid layout vs. Flexbox

想要簡單輕便的實現網頁自適應式排版,要使用哪一種語法呢?

Flexbox長於小規模佈局,而Grid layout則適於大規模佈局。
● 需要具備哪些知識:基本的HTML,CSS語法。
● 哪些人適合學習?
1.只會基本網頁語法的設計師
2.想要在既有框架下(ex.C/S系统、Adobe Experience Manager)客製化區塊布局
3.所有想快速製作單一簡單頁面的人
Flexbox是單向度的排版,Grid則是包含X軸和Y軸的平面排版方式。
如果你想要簡單輕便的實現單一軸向的自適應式排版,例如導覽列、卡片式排版、相簿等,可以選擇使用Flexbox。如果你想快速實現雙軸平面式,甚至不規則的排版(像平面設計排版那樣的自由),那麼使用Grid layout會更適合也更快速。

Flexbox簡介
Flexbox layout 是基於display:flex或是display: inline-flex的語法,以單向度主軸或交叉軸為方向的排版。
這個語法透過 flex-flow 的各項數值能輕易的實現適應式排版, flex-flow 能決定排版以實際物理的方向 (上/右/下/左)、直行或橫列排版(row/ column)以及Flex item 遇到Flex Container的寬度極限時,超出或換行排列。 flex規定元素如何伸長或縮短以適應flex容器中的可用空間。

Flexbox的語法

∙ display

首先,必須先將display設為flex或是inline-flex才能運作,這兩者的差別是 block-level 和 inline-level 的差異,通常直接設定為flex就可以了。
關於block-level和inline-level更詳細的解釋可以參考。
display: flex | inline-flex;

∙ flex-direction

直行或橫列排版,也可以使之反向。用來決定內容元素的方向。d
flex-direction: row | row-reverse | column | column-reverse;

∙ flex-wrap

決定內容元素撐滿容器寬度時,是否換行。在自適應式排版時會是重要的功能。
flex-wrap: nowrap | wrap | wrap-reverse;

∙ order

控制元件的順序,在自適應時很好用,可以將某些元件順序上提。
order: 數字整數;

∙ flex-flow

flex-direction和flex-wrap簡化版本,可以將兩個數值寫在一起。
flex-flow: <‘flex-direction’> | <‘flex-wrap’>

∙ flex

Flexbox最重要的數值,分別是flex-grow、flex-shrink 和flex-basis。規定元素如何伸長或縮短以適應flex容器中的可用空間。
  • flex-grow 決定了元素的增長值,預設是0,是一個不帶單位的數字。當容器剩餘空間子元素加總空間時,每個元素分配剩餘空間的值。設置flex-grow為 1 ,子元素允許自動填滿剩餘空間。
  • flex-shrink 決定了元素的收縮值,預設是1,是一個不帶單位的數。當容器剩餘空間子元素加總空間時,每個元素對於多出剩餘空間縮減的值。設置flex-shrink為 0 的子元素不允許收縮。
  • flex-basis 是元素的初始大小,預設是auto。這個值是一個帶單位的數字。
flex: none | [ <‘flex-grow’>|<‘flex-shrink’>|<‘flex-basis’>]

用這個國旗的例子來試試看吧🇫🇷

∙ align-items

用來使元素在交叉軸方向上(垂直線)對齊
align-items: flex-start | flex-end | center | stretch

∙ justify-content

屬性用來使元素在主軸方向上(水平線)對齊
justify-content: flex-start | flex-end | center | baseline | stretch
以上是各項數值的介紹,如果想要深入了解,可以閱讀,裡面有更詳細的介紹。

透過下面範例實際調整各個參數玩玩看🙌

實際應用 Takeout
參考資料
Basic concepts of flexbox
深入解析CSS Flexbox

謝謝你看到這裡,歡迎分享! Hello,我是Vera,總是在思考優化工作流程方法的Designer,喜歡設計、藝術和文學。 如果有任何建議或合作提案可以透過以下這些方式聯繫。 Behance | Dribbble | Website

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.