CSS 習作｜Flexbox 網頁排版術
閱讀時間約 8 分鐘
六角切版直播班進入到第 9 天 😱，課前預習影音也來到了「Flex 網頁排版技巧」這個章節，本篇習作內容進入到 CSS 排版實作，一起瞭解 Flexbox，開始第一個網頁排版吧 💪🏻！
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
🤔 Flexible Box Layout Module 是什麼？
Flexbox 彈性盒子，是一種透過欄與列的布局來排列內容的 CSS 模組，Flexbox 可以讓我們更輕鬆且靈活的設計響應式佈局結構，使元素能夠依最父層的容器尺寸來自適應、伸縮元素寬高，也能過通過 CSS 的設定來使物件水平且垂直對齊，而無需使用浮動 ( Float ) 或定位 ( Position )來排版。
Flexbox 如何撰寫？
Flexbox 由 Flex container 以及 Flex items 兩個要素所組成。
因此要開始使用 Flexbox 模型，首先需定義一個父層元素 Parent Element。
如下圖，以 class 命名為 flex-container 的容器為父層元素，而裡頭再放入三個 <div> 容器作為 子層元素 Flex items：
如下圖，以 class 命名為 flex-container 的容器為父層元素，而裡頭再放入三個 <div> 容器作為 子層元素 Flex items：
為父層容器宣告 CSS：display: flex;
第二步，我們為「flex-container」這個容器的 CSS 宣告：display: flex;
我們可以看到本來呈現 3 列的 flex-child 變成 3 欄式排版了，如下圖：
理解 Flex ：主軸 Main axis、交錯軸 Cross axis
CSS 語法「display：flex」
flex 將容器劃分為「主軸 Main axis」和「交錯軸 Cross axis 」，裡面的子元素將「根據主軸與交錯軸的起點」來產生不同的方向性：
flex-direction 屬性
flex-direction 屬性定義容器要在哪個方向堆疊 flex items。
flex-direction 屬性值有以下這些：
flex-direction 屬性值有以下這些：
- flex-direction: row; 由左至右
- flex-direction: row-reverse; 由右至左
- flex-direction: column; 由上至下
- flex-direction: column-reverse; 由下至上
一般來說預設都是由左至右的 flex-direction: row
需要釐清的觀念是，當我們將父元素設定為 flex-direction: column 時，主軸線和交錯軸線位置會調換（兩者永遠互相垂直），因此連帶著 justify-content 和 align-items 等屬性的對齊方式也會跟著變動。
justify-content 屬性
The justify-content property is used to align the flex items.
透過定義 justify-content，我們可以使 flex-item 在依循主軸的 flex-direction 下產生其他排版變化，根據 flex-direction 屬性值的不同， justify-content 也會產生不同排列，如下圖：
- justify-content: flex-start;
flex-start 為預設值，依主軸的 flex-direction 下，對齊主軸的起點 - justify-content: flex-end;
依主軸的 flex-direction 下，對齊主軸的終點 - justify-content: center;
依主軸的 flex-direction 下，對齊主軸的中央 - justify-content: space-around;
依主軸的 flex-direction 下，平均分配主軸寬度和間距 - justify-content: space-between;
依主軸的 flex-direction 下，第一項和最後一項各自貼齊起點和終點，平均分配寬度。
需要注意的是，「justify-content: center;」並不是一種水平置中效果，而是一種「建立在主軸方向下的對齊方式」。
主軸為 display: flex 的時候，它的 direction 是從左到右，主軸的左邊為起點，右邊為終點，而裡面的 item 會依照主軸的位置來去做排列。
主軸為 display: flex 的時候，它的 direction 是從左到右，主軸的左邊為起點，右邊為終點，而裡面的 item 會依照主軸的位置來去做排列。
而在不同的 flex-direction 下設置不同 justify-content 也會有不同的變化及排列組合，可參考六角學院設計的「Flexbox Playground」或是「Flexbox Demo」、「MDN flexbox」、「A Complete Guide to Flexbox」來加深瞭解！
align-items 屬性
align-items 決定交錯軸的排列方式，而 align-items 又有以下幾種：
- align-items: flex-start;
flex-start 為預設值，依主軸的 flex-direction 下，對齊交錯軸的起點 - align-items: flex-end;
依主軸的 flex-direction 下，對齊交錯軸的終點 - align-items: center;
依主軸的 flex-direction 下，對齊交錯軸的中央 - align-items: stretch;
依主軸的 flex-direction 下，flex-item 被拉伸以填滿整個容器 - align-items: baseline;
依主軸的 flex-direction 下，對齊 flex-item 內容物的基線
需注意的是，在不同 flex-direction 下，align-items 的排列方式也有多種變化，如下圖所示，在 justify-content 和 align-items 兩者值同樣是 center 時，會因為 flex-direction 的不同（一個為 row ，另一個為 column）而產生不同排版，因此在使用 justify-content 和 align-items 時，需特別注意由 flex-direction 所影響的主軸、交錯軸起點及終點方向：
Flexbox 小遊戲
Flexbox 的變化有非常多種，上述知識點還沒有放入更多混用方式，可以藉由下面兩個遊戲挑戰來審視自己的觀念有沒有理解透徹，而遊戲裡面也有更多本篇習作還沒有討論到的「flex-wrap」、「align-content」、「align-slef」、「order」、「flex-flow」...等（ 燒腦 😶🌫️ ）
本篇參考學習資源
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
在這篇教學中，我們會介紹Renpy框框 (Box)的各種造型特性，包括水平框 (hbox)、垂直框 (vbox) 和固定框 (fixed)，以及常見特性如spacing、box_reverse和box_wrap。透過這份教學，您將能更瞭解Renpy框框的運作原理和應用，進一步提升Renpy的應用能力
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
這篇文章分享了 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 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
在這篇教學中，我們會介紹Renpy框框 (Box)的各種造型特性，包括水平框 (hbox)、垂直框 (vbox) 和固定框 (fixed)，以及常見特性如spacing、box_reverse和box_wrap。透過這份教學，您將能更瞭解Renpy框框的運作原理和應用，進一步提升Renpy的應用能力
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
這篇文章分享了 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 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。