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

更新於 發佈於 閱讀時間約 5 分鐘

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

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
以上是各項數值的介紹,如果想要深入了解,可以閱讀W3C的文件,裡面有更詳細的介紹。

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


實際應用 Takeout


參考資料
Basic concepts of flexbox
深入解析CSS Flexbox

謝謝你看到這裡,歡迎分享!

Hello,我是Vera,總是在思考優化工作流程方法的Designer,喜歡設計、藝術和文學。
如果有任何建議或合作提案可以透過以下這些方式聯繫。
BehanceDribbbleWebsite
avatar-img
29會員
10內容數
Visualizing, Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感,包含視覺設計、品牌與文字閱讀的綜合設計維他命。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vera Chang的沙龍 的其他內容
如果你想提高寫作的順暢度,更專心和簡潔的寫作環境,更容易進入Flow的狀態,那麼你應該需要學會Markdown。
如果你想提高寫作的順暢度,更專心和簡潔的寫作環境,更容易進入Flow的狀態,那麼你應該需要學會Markdown。
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在這一章節中,我們介紹了 Flexbox 這個 CSS 模型及其用法,重點講解了 Flex 容器和項目的各種屬性。通過具體的示例,展示了如何使用 Flexbox 進行一維佈局設計,並且通過實踐案例,展示了多行 Flex 項目和不同對齊方式的應用。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
1.justify-content 用來控制主軸(水平)如何分配對齊 如果要改垂直對齊的話+上 flex-direction : column 2.align-item 他是控制子項目再交叉軸(垂直)的對齊方式 3.flex-shrink 收縮性! 當空間不足時預設會是1,等於是
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在這一章節中,我們介紹了 Flexbox 這個 CSS 模型及其用法,重點講解了 Flex 容器和項目的各種屬性。通過具體的示例,展示了如何使用 Flexbox 進行一維佈局設計,並且通過實踐案例,展示了多行 Flex 項目和不同對齊方式的應用。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
1.justify-content 用來控制主軸(水平)如何分配對齊 如果要改垂直對齊的話+上 flex-direction : column 2.align-item 他是控制子項目再交叉軸(垂直)的對齊方式 3.flex-shrink 收縮性! 當空間不足時預設會是1,等於是
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟