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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：
使用空格的情況
.box p{ font-size:20px; color
CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：
使用空格的情況
.box p{ font-size:20px; color
CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：