設計師的RWD網頁排版 — Grid layout vs. Flexbox
更新於 發佈於 閱讀時間約 5 分鐘
留言
留言分享你的想法！
Vera Chang的沙龍
29會員
10內容數
Visualizing, Hearing & Seeing. Design vitamin for creative mind. 這本設計線上誌希望提供更多元的創作靈感，包含視覺設計、品牌與文字閱讀的綜合設計維他命。
Vera Chang的沙龍的其他內容
2024/01/24
臺北雙年展的「小世界」是一場讓人深思的藝術之旅，除了聚焦於不同世界文化的差異，還描繪了一種類似「小確幸」的感覺，藝術家運用了「微觀」和「封閉生態圈的創造邏輯」兩大手法，展覽中的作品令人感觸良多。
2024/01/24
臺北雙年展的「小世界」是一場讓人深思的藝術之旅，除了聚焦於不同世界文化的差異，還描繪了一種類似「小確幸」的感覺，藝術家運用了「微觀」和「封閉生態圈的創造邏輯」兩大手法，展覽中的作品令人感觸良多。
2023/07/27
Midjourney生成式AI利用強大技術，讓設計師輕鬆創造多樣風格的Line貼圖，充滿獨特魅力。不僅提高設計效率，也激發無限創意，帶來全新創作體驗，革新平面設計。這篇文章詳解Midjourney設計步驟與生成設計成果！
2023/07/27
Midjourney生成式AI利用強大技術，讓設計師輕鬆創造多樣風格的Line貼圖，充滿獨特魅力。不僅提高設計效率，也激發無限創意，帶來全新創作體驗，革新平面設計。這篇文章詳解Midjourney設計步驟與生成設計成果！
2021/08/07
除了好的設計，品牌成功最重要的秘訣：完整的顧客歷程與經驗感受。
何謂品牌力？好的品牌設計對公司內部員工與外部顧客分別有什麼重要意義？
2021/08/07
除了好的設計，品牌成功最重要的秘訣：完整的顧客歷程與經驗感受。
何謂品牌力？好的品牌設計對公司內部員工與外部顧客分別有什麼重要意義？
你可能也想看
我的「媽」呀！
母親節即將到來，vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常，或是一直想對她表達的感謝，又或者，是你這輩子最想聽她說出的一句話。
也歡迎你曬出合照，分享照片背後的點點滴滴 ♥️
透過創作，將這份情感表達出來吧！🥹
我的「媽」呀！
母親節即將到來，vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常，或是一直想對她表達的感謝，又或者，是你這輩子最想聽她說出的一句話。
也歡迎你曬出合照，分享照片背後的點點滴滴 ♥️
透過創作，將這份情感表達出來吧！🥹
Flexbox一種強大佈局技術，主要用於一維排列 的元素。它提供了更靈活的對齊方式，能夠輕鬆控制子元素的方向、對齊方式、間距與自適應能力，適用於現代網頁設計與響應式開發。使用方式為在 HTML 的父元素當中，透過寫入 display:flex; 這行語法，即能夠讓子元素產生各種排列的方式。
Flexbox一種強大佈局技術，主要用於一維排列 的元素。它提供了更靈活的對齊方式，能夠輕鬆控制子元素的方向、對齊方式、間距與自適應能力，適用於現代網頁設計與響應式開發。使用方式為在 HTML 的父元素當中，透過寫入 display:flex; 這行語法，即能夠讓子元素產生各種排列的方式。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
在 Modern Web 的世界中，已經有非常多的套件、語法、框架，可以解決大部分網頁排版問題。
以我近期的觀察來說，在專案開發時，大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構，而採取原生的 CSS 寫法，而不是仰賴快速又方便的套件。
在 Modern Web 的世界中，已經有非常多的套件、語法、框架，可以解決大部分網頁排版問題。
以我近期的觀察來說，在專案開發時，大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構，而採取原生的 CSS 寫法，而不是仰賴快速又方便的套件。
css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code:
E
結果如下:
width > 1200px:
width
width
width
接著刻意讓第三個框框高度設為400px，畫面結果如下:
可以看到第二列的格
css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code:
E
結果如下:
width > 1200px:
width
width
width
接著刻意讓第三個框框高度設為400px，畫面結果如下:
可以看到第二列的格
相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？
相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？