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

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

Flexbox長於小規模佈局，而Grid layout則適於大規模佈局。

● 需要具備哪些知識：基本的HTML,CSS語法。

● 哪些人適合學習？

1.只會基本網頁語法的設計師

2.想要在既有框架下(ex.C/S系统、Adobe Experience Manager)客製化區塊布局

3.所有想快速製作單一簡單頁面的人

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;

∙ flex-direction

flex-direction: row | row-reverse | column | column-reverse;

∙ flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

∙ order

order: 數字整數;

∙ flex-flow

flex-flow: <‘flex-direction’> | <‘flex-wrap’>

∙ 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