新聞網頁製作（四）- CSS Position 與 Flexbox 排版

# 新聞網頁製作（四）- CSS Position 與 Flexbox 排版 ## Slides: https://hackmd.io/cmmR6Pg8TJG0TubSNKzwrg#/ ## 學習大綱： - [新聞網頁製作（一） - HTML 標記式語言](https://hackmd.io/svhFYKq4QyaarC_J0WRsig) - [新聞網頁製作（二） - CSS 串接樣式表](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ) - [新聞網頁製作（三）- CSS 選擇器與基礎網頁排版](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg) - [新聞網頁製作（四）- CSS Position 與 Flexbox 排版](https://hackmd.io/i1uBelrpRv2Uz5emQawIiw) - [新聞網頁製作（五）- Responsive Web Design 響應式網頁](https://hackmd.io/ojTXG2s0RQaJz85goqIz1w) - [新聞網頁製作（六）- 多媒體元素與動態效果](https://hackmd.io/J_YYk1YUSum1x3fVo75PXA) - [新聞網頁製作（七）- 使用 GitHub 部署網頁](https://hackmd.io/P9N34oIwS2G6Mfhag3Rqzg) ## CSS Position - 任意移動區塊 CSS `position` 是非常好用的排版技巧，可以精準地調教版面，但相對地，操作上有些複雜。 `position` 有五個值，分別是 `position: static`（預設值）, `position: relative`, `position: absolute`, `position: fixed` 和 `position: sticky`。此外，搭配 `position` 使用的 CSS 有 `top`, `left`, `right` 和 `bottom`。透過它們，我們便能任意移動元素的位置。 ### `position: static` （預設值）當我們在排版時，元素會依序由上至下，由左至右排列在畫面上。這樣預設的排版方式，是因為每個元素預設 `position: static`。當元素為 `position: static` 時，該元素： - **無法**設定 `top`, `left`, `right` 和 `bottom`等樣式來移動元素。 - 子元素若有 `position: absolute` 樣式，子元素在排版時，**不會**參照該元素來排版。見圖1。 <iframe height="600" style="width: 100%;" scrolling="no" title="position: static" src="https://codepen.io/nickhsine/embed/eYPNLRV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/eYPNLRV"> position: static</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### `position: relative` 當元素為 `position: relative` 時，它的排版方式仍與預設排版方式相同；但該元素已被視為 `positioned` 元素，代表該元素： - 可以設定 `top`, `left`, `right` 和 `bottom` 等樣式來位移元素。 - 子元素若有 `position: absolute` 樣式，子元素在排版時，**會**參照該目標元素來排版。 <iframe height="600" style="width: 100%;" scrolling="no" title="position: static" src="https://codepen.io/nickhsine/embed/WNavgXR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/WNavgXR"> position: static</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### `position: absolute` 當元素為 `position: absolute` 時，它的排版方式就與預設排版的方式截然不同。該元素會被視為 `positioned` 元素，代表該元素： - 可以設定 `top`, `left`, `right` 和 `bottom` 等樣式來位移元素。 - 子元素若有 `position: absolute` 樣式，子元素在排版時，**會**參照該目標元素來排版。 <iframe height="600" style="width: 100%;" scrolling="no" title="position: absolute" src="https://codepen.io/nickhsine/embed/OJBVoQN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/OJBVoQN"> position: absolute</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 當元素設定成 `position: absolute` 後，元素會向上尋找 `positioned` 祖先元素（ancestor），根據**最先找到的 `positioned` 祖先元素**當排版參考元素。舉圖3 來說，子元素被設定成 `position: absolute` 後，它排版時所參考的元素是目標元素；原因在於，目標元素是 `positioned` 元素，且它是最接近子元素的祖先元素。當目標元素要排版時，它也會向上找尋 `positioned` 祖先元素，然而，目標元素沒有 `positioned` 祖先元素，所以它排版時所參考的對象是 HTML 最外層的元素；也因如此，它才會被排在左上方的位置。 ### `position: fixed` 當元素為 `position: fixed` 時，它排版時所參考的對象是瀏覽器的 viewport。該元素會被視為 `positioned` 元素，代表該元素： - 可以設定 `top`, `left`, `right` 和 `bottom` 等樣式來位移元素。 - 子元素若有 `position: absolute` 樣式，子元素在排版時，**會**參照該目標元素來排版。 <iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/nickhsine/embed/eYPNLVM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/eYPNLVM"> Untitled</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### `position: sticky` 當元素為 `position: sticky` 時，它排版時所參考的對是瀏覽器的 viewport。然而， `position: sticky` 與 `position: fixed` 的不同在於，`position: fixed` 元素會從頭到尾，都釘在 viewport 上；`position: sticky` 則是當 viewport 的上緣或是下緣（端看 `position: sticky` 元素搭配的 `top` 和 `bottom` 樣式）碰到 `position: sticky` 元素時，該元素才會釘在 viewport 上。 <iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/nickhsine/embed/gOBpdea?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/gOBpdea"> Untitled</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 當瀏覽器 viewport 上緣碰到 `position: sticky; top: 0px` 元素時，該元素會被釘在 viewport 上。* ### 更多 position 解釋 - [`position` 解釋(1)](http://zh-tw.learnlayout.com/position.html)<br/> - [`position` 解釋(2)](https://developer.mozilla.org/en-US/docs/Web/CSS/position) ## CSS Flexbox CSS position 適用於需要精準微調的版型，然而，當版型隨著 Responsive Web Design 的設計而變化較大時，使用 CSS position 來排版，讓 HTML 變得複雜，且不易維護。當我們要排版時，CSS flexbox 是不可或缺的得力助手。【注意】flexbox 是較新的 CSS style，如果你希望網頁能夠支援舊版的瀏覽器，例如 IE10 以下，那 flexbox 可能不是個好選擇。<br/> ### 概念與術語 <img src="http://nickhsine.github.io/teach-at-nccu/assets/2019-05-09/flex-illustration.png" width="100%"></img> *上圖來自[w3c flexbox](https://www.w3.org/TR/css-flexbox-1/#box-model)* <br> 由上圖中可以看到幾個專有名詞 * flex container * flex item * main start * main end * main axis * cross start * cross end * cross axis * main size * cross size 在開始 flexbox 使用方式教學前，得先理解 flexbox 的運作原理。 flexbox，顧名思義就是一個盒子，在這個盒子(flex container)之中，你可以由左至右(main start -> main end)、由上至下(cross start -> cross end)（預設）排列元素(flex item)。透過 `flex-direction` 的設定，你可以輕易改變元素之間的排列方向。在編排版面時，最令人頭痛的事情，不外乎是元素之間的水平對齊和垂直對齊的設定。然而，flexbox 提供了 `justify-conent`（用於水平對齊）和 `align-items`（用於垂直對齊）兩個強大的設定，讓我們能夠輕易地排出多個元素互相對齊的版型。接下來我們將一一介紹 flexbox 的 CSS 樣式，包含： ### `flex-direction` 原本在 flex container 裡的 flex items，是照著 main axis 由左至右排列，照著 cross axis 由上至下排列。而設定 `flex-direction`，可以調換 flex container 的 main axis 和 cross axis。 #### `flex-direction: row`(預設值) flex items 根據 main axis ，由左至右排列<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/flex-direction-row.png" width="300px"></img> #### `flex-direction: row-reverse` flex items 根據 main axis ，由右至左排列<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/flex-direction-row-reverse.png" width="300px"></img> #### `flex-direction: column` flex items 根據 cross axis，由上至下排列<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/flex-direction-column.png" width="300px"></img> #### `flex-direction: column-reverse` flex items 根據 cross axis，由下至上排列<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/flex-direction-column-reverse.png" width="300px"></img> --- ### `justify-content` `justify-content` 針對 main axis 上面的 flex items 做版面編排。共有五種排法： #### `justify-content: flex-start`(預設值)<br/> flex items 由 main start 往 main end 排列，如果 flex items 不足以撐滿整個 flex container 的話，則會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/justify-content-flex-start.png" width="300px"></img> #### `justify-content: flex-end`<br/> flex items 由 main end 往 main start 排列，如果 flex items 不足以撐滿整個 flex container 的話，則會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/justify-content-flex-end.png" width="300px"></img> #### `justify-content: center`<br/> flex items 會置於 main start 和 main end 中間。如果 flex items 不足以撐滿整個 flex container 的話，則會左右留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/justify-content-center.png" width="300px"></img> #### `justify-content: space-between`<br/> flex items 會均等地置於 main start 和 main end 之間，每個 flex item 與它的鄰居彼此之間距離相等。頭尾的兩個 flex item 會頂到 main start 和 main end。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/justify-content-flex-between.png" width="300px"></img> #### `justify-content: space-around`<br/> flex items 會均等地置於 main start 和 main end 之間，每個 flex item 與它的鄰居彼此之間距離相等。頭尾的兩個 flex item 會離 main start 和 main end 一點距離（留白）。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/justify-content-flex-around.png" width="300px"></img> --- ### `align-items` `align-items` 針對 cross axis 上面的 flex items 做版面編排。共有五種排法： #### `align-items: flex-start` flex items 由 cross start 往 cross end 排列，如果 flex items 不足以撐滿整個 flex container 的話，則會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-items-flex-start.png" width="300px"></img> #### `align-items: flex-end`<br/> flex items 由 cross end 往 cross start 排列，如果 flex items 不足以撐滿整個 flex container 的話，則會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-items-flex-end.png" width="300px"></img> #### `align-items: center`<br/> flex items 會置於 cross start 和 cross end 中間，如果 flex items 不足以撐滿整個 flex container 的話，則會上下留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-items-center.png" width="300px"></img> #### `align-items: stretch`(預設值)<br/> flex items 會試圖撐滿 cross start 和 cross end 之間的版面。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-items-stretch.png" width="300px"></img> #### `align-items: baseline`<br/> flex items 會置於 cross start 和 cross end 中間。 flex items 之間的對齊方式是根據字的 baseline 做對齊。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-items-baseline.png" width="300px"></img> --- ### `flex-wrap` 一般來說(就預設值而言)，flex items 會盡可能往 flex container 裡塞，當 flex container 的寬度不足以放 flex items 時，flexbox 會主動把 flex item 縮小，或是超出讓 flex item 超出(overflow) flex container，以求順利將 flex items 塞進 flex container 裡。但由於我們設計版面時，有些元素的寬度不希望被 flexbox 縮小，而是往下一行繼續擺放（也就是撐高 flex container）。因此我們可以透過 `flex-wrap` 來達成這樣的設計。 #### `flex-wrap: nowrap`(預設值) 在此設定下，flex Iiem 可能一）被 flex container 縮小 ![](https://i.imgur.com/GdNobBu.png) 二）超出 flex container 的寬度(當 flex item 的 `flex-shrink: 0`，也就是不給 flexbox 自動縮小)<br/> ![](https://i.imgur.com/dQxJXeR.png) #### `flex-wrap: wrap` 在此設定下，flex item 如塞不進 flex container 的話，則會往下一行排列。<br/> ![](https://i.imgur.com/4HKPuO3.png) #### `flex-wrap: wrap-reverse` 在此設定下，flex item 如塞不進 flex container 的話，則會往下一行排列，但排列的順序會由 cross end 往 cross start 排列。 ![](https://i.imgur.com/DZgffQc.png) --- ### `align-content` 前面有講到 `align-items`，`align-items` 是針對 flex items 在同一行（flex line）裡垂直對齊的方式。<br/> 而 `align-content` 則是設定多個 flex lines 垂直對齊的方式。 #### `align-content: stretch`(預設值) flex lines 由 cross start 往 cross end 排列，如果 flex lines 不足以撐滿整個 flex container 的話，則會留白，flex lines 彼此之間也會有一定的留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-stretch.png" width="300px"></img> #### `align-content: flex-start` flex lines 由 cross start 往 cross end 排列，<br/> 如果 flex lines 不足以撐滿整個 flex container 的話，<br/> 則留白的空間會在 flex lines 以下。flex lines 彼此之間不會留白。<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-flex-start.png" width="300px"></img> #### `align-content: flex-end` flex lines 由 cross end 往 cross start 排列，如果 flex lines 不足以撐滿整個 flex container 的話，則留白的空間會在 flex lines 以上。flex lines 彼此之間不會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-flex-end.png" width="300px"></img> #### `align-content: center` flex lines 由 cross start 往 cross end 排列，如果flex lines 不足以撐滿整個 flex container 的話，flex lines 會集中在 flex container 中間，上下的空間會留白。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-flex-center.png" width="300px"></img> #### `align-content: space-between` flex lines 會均等地置於 cross start 和 cross end 之間，每個 flex line 與它的鄰居(flex line)彼此之間距離相等。頭尾的兩個 flex lines 會頂到 cross start 和 cross end。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-space-between.png" width="300px"></img> #### `align-content: space-around` flex lines 會均等地置於 cross start 和 cross end 之間，每個 flex line 與它的鄰居(flex line)彼此之間距離相等。頭尾的兩個 flex lines 會離 cross start 和 cross end 一點距離（留白）。<br/> <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-04-26/align-content-space-around.png" width="300px"></img> --- ### `margin` 在使用 flexbox 之前，我們若要排出水平垂直置中的版型，可以用 `vertical-align` 搭配 `text-align` 或是 `position: relative` 搭配 `position: absolute` 來排版，雖然可行，但不夠漂亮。然而，透過 flexbox ，我們只要將 flex item 設定成 `margin: auto` ，即可完成水平垂直置中的排版。見程式範例： <iframe height="300" style="width: 100%;" scrolling="no" title="flexbox & margin:auto" src="https://codepen.io/nickhsine/embed/dygXQZY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/dygXQZY"> flexbox & margin:auto</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ### `align-self` 前述 `align-items` 可以針對一排(flex line)上的flex items 調整垂直對齊的方式。<br/> 然而，當你想要特別調整 **單個flex item** 時，你可以在 flex item 上設定 `align-self` 去覆蓋 `align-items` 的效果。<br/> <iframe height="300" style="width: 100%;" scrolling="no" title="flexbox & align-self" src="https://codepen.io/nickhsine/embed/JjmKeMP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/JjmKeMP"> flexbox & align-self</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ### `order` 在 flex container 裡，除了 `flex-direction` 可以更改 flex items 的順序，<br/> 也可以透過 `order` 來做更細部的調整。<br/> 在不同的 flex item 上面給不同 `order` 的值，值是數字，你可以給 1, 2, 3, ...etc，根據 flex items 數量的多寡而定。<br/> flex container 會根據 `order` 值的大小來安排 flex item 的位置。<br/> <iframe height="300" style="width: 100%;" scrolling="no" title="flexbox & order" src="https://codepen.io/nickhsine/embed/poxbQpZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/nickhsine/pen/poxbQpZ"> flexbox & order</a> by nickhsine (<a href="https://codepen.io/nickhsine">@nickhsine</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 上述的 flexbox styles 已經涵括了大部分設計上的需求，如果精通，用上述的功能已可排出絕大部分的版型。但， flexbox 還有一些稍微複雜的屬性像是 `flex-shrink`, `flex-grow` 和 `flex-basis` 等。由於使用度沒有這麼高，就不在此多做說明，如果同學有興趣，可以看下方附錄的相關教學網頁。 ## 附錄 ### Flexbox 小遊戲 - [FLEXBOX FROGGY](https://flexboxfroggy.com/) - [Flexbox Defense](http://www.flexboxdefense.com/) ### Flexbox 教學網頁 - [深入解析 CSS Flexbox](http://www.oxxostudio.tw/articles/201501/css-flexbox.html) - [DIVE INTO FLEXBOX](https://bocoup.com/blog/dive-into-flexbox) ## 課後練習 https://github.com/nickhsine/teach-at-nccu/raw/master/109-01/11-10/flexbox-course-exercise.zip ### Position 練習： Mockup： https://www.figma.com/file/8JXkhtQG9wi5b3qyzrBniS/course-practice-css-position 下載練習檔案： https://github.com/nickhsine/teach-at-nccu/raw/master/110-02/04-19/exercises/2022-04-19-exercise.zip  ### Flexbox 練習： https://www.figma.com/file/Cs1wL4CBkwSR5vBC5HBx2u/course-practice-flexbox 下載練習檔案： https://github.com/nickhsine/teach-at-nccu/raw/master/110-02/04-26/exercises/2022-04-26-exercise.zip 練習檔案實作範例: https://github.com/nickhsine/teach-at-nccu/raw/refs/heads/master/2025-04-01.zip  ###### tags: `teach-at-nccu`, `css`, `html`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.