CSS 筆記 - HackMD

# CSS 筆記 ## CSS 參考網址 - [w3schools](https://www.w3schools.com/css/) :::success 學習完後可去練習的地方練習我們設計的題目，可以試試看會不會~~ ::: ## How to use CSS 有三種插入style的方式: 1. [External CSS](#External-CSS) 2. [Internal CSS](#Internal-CSS) 3. [Inline CSS](#Inline-CSS) ### External CSS 將CSS指令寫在另一個副檔名為.css的檔案中(不能包含任何HTML指令)，可以直接改變整個網站風格指令: ```html <head> <link rel="stylesheet" href="檔案名稱/路徑"> </head> ``` ### Internal CSS 將CSS指令寫在和HTML指令同一個檔案中，只能修改此網頁的風格指令: ```html <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> ``` ### Inline CSS 將CSS指令寫在相關的元素附近，只能修改一個元素的風格指令: ```html <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html> ``` #### Priority :::warning 當同時使用External, Internal, Inline CSS時，將以Inline CSS的內容作為最後表現形態即CSS優先順序為： Inline > Internal > External 但在任一CSS後面加入"!important"，則無視優先順序 ::: ------------------------------------------------------- ## Selectors CSS 選擇器可用來**尋找**(或選擇)想要裝飾的HTML元素。 **CSS selectors 的五種分類:** 1. [Simple selectors](#Simple-selectors) - 以name, id, class作為選擇參考 2. [Combinator selectors](#Combinator-selectors) - 以特殊關聯符連結兩個simple seletors，例：`>`、`+`、`~` 3. [Pseudo-class selectors](#Pseudo-class-selectors) - 以特定狀態作為選擇參考，例：`:hover`、`:visited`、`first-child` 4. [Pseudo-elements selectors](#Pseudo-class-selectors) - 選擇並裝飾元素的部分區塊，例：`::first-line`、`::before` 5. [Attribute selectors](#Attribute-selectors) - 以屬性或其值作為選擇參考，例：`a[target="_blank"]`、`[attribute~="value"]` ### 1. Simple selectors 用name、id、class選擇要修改風格的元素 * name 所有用到**同一個tag名稱**的element都會改變風格。 ```html <!DOCTYPE html> <html> <head> <style> p { text-align: center; color: dodgerblue; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p>Me too!</p> <p>And me!</p> </body> </html> ``` <div style="border:1px solid"> <p style="text-align: center;color: dodgerblue;">Every paragraph will be affected by the style.</p> <p style="text-align: center;color: dodgerblue;">Me too!</p> <p style="text-align: center;color: dodgerblue;">And me!</p> </div>  * id(#) 用**id**選擇**特定元素**改變其風格，==一個頁面中的id要唯一==。 ```html <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: dodgerblue; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> ``` <div style="border:1px solid"> <p style="text-align: center;color: dodgerblue;">Hello World!</p> <p>This paragraph is not affected by the style.</p> </div>  * class(.) --> 用**class名稱**選擇要改變風格的**所有特定元素** (一個元素可以屬於多個class，以空格分開) ```html <!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: dodgerblue; } </style> </head> <body> <h1 class="center">Dodgerblue and center-aligned paragraph.</h1> <p class="center">Dodgerblue and center-aligned paragraph.</p> </body> </html> ``` <div style="border:1px solid"> <h1 style="text-align: center;color: dodgerblue;">Dodgerblue and center-aligned paragraph.</h1> <p style="text-align: center;color: dodgerblue;">Dodgerblue and center-aligned paragraph.</p> </div>  * name + class --> 改變特定tag中特定class名稱的風格 ```html <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: dodgerblue; } </style> </head> <body> <span class="center">This span will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body> </html> ``` <div style="border:1px solid"> <span>This span will not be affected</span> <p style="text-align: center;color: dodgerblue;">This paragraph will be dodgerblue and center-aligned.</p> </div>  * Universal(*) --> 改變**所有頁面**上元素的風格 ```html <!DOCTYPE html> <html> <head> <style> * { text-align: center; color: dodgerblue; } </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> ``` <div style="border:1px solid"> <h1 style="text-align: center;color: dodgerblue;">Hello world!</h1> <p style="text-align: center;color: dodgerblue;">Every element on the page will be affected by the style.</p> <p style="text-align: center;color: dodgerblue;">Me too!</p> <p style="text-align: center;color: dodgerblue;">And me!</p> </div>  * group --> 將不同的元素改成同一個風格 ```html <!DOCTYPE html> <html> <head> <style> h1, h2 { text-align: center; color: dodgerblue; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html> ``` <div style="border: 1px solid;"> <h1 style="text-align: center;color: dodgerblue;">Hello World!</h1> <h2 style="text-align: center;color: dodgerblue;">Smaller heading!</h2> <p>This is a paragraph.</p> </div>  -------------------------------------------------- ### 2. Combinator selectors 用來指定和其他元素有關係的特定元素，通常有父子、兄弟、前後，由多個simple selector組成。 * descendant selector (space) --> 是特定元素的後代元素會被修改 ```html <!DOCTYPE html> <html> <head> <style> div p { //所有包含在div中的p都會被修改 background-color: DodgerBlue; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <section><p>Paragraph 3 in the div.</p></section> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p> </body> </html> ``` <div style="border: 1px solid;"> <div> <p style="background-color: DodgerBlue;">Paragraph 1 in the div.</p> <p style="background-color: DodgerBlue;">Paragraph 2 in the div.</p> <section><p style="background-color: DodgerBlue;">Paragraph 3 in the div.</p></section> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p> </div>  * child selector (>) --> 是特定元素的子元素會被修改 ```html <!DOCTYPE html> <html> <head> <style> div > p { // div的child為p的 background-color: DodgerBlue; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <section>  <p>Paragraph 3 in the div (inside a section element).</p> </section> <p>Paragraph 4 in the div.</p> </div> <p>Paragraph 5. Not in a div.</p> </body> </html> ``` <div style="border: 1px solid;"> <div> <p style="background-color: DodgerBlue;">Paragraph 1 in the div.</p> <p style="background-color: DodgerBlue;">Paragraph 2 in the div.</p> <section>  <p>Paragraph 3 in the div (inside a section element).</p> </section> <p style="background-color: DodgerBlue;">Paragraph 4 in the div.</p> </div> <p>Paragraph 5. Not in a div.</p> </div>  :::info :::spoiler Child和Descendant差異 * Child(子元素) * 直接位於父類別的元素(只縮排一次) eg: ```html <div> <p>Paragraph 1 in the div.</p> <div> ``` * Descendant(後代) * 位於父類別內的所有元素(可以縮排一次或多次) eg: ```html <div> <section> <p>Paragraph 3 in the div (inside a section element).</p> </section> </div> ``` ::: * adjacent sibling selector (+) --> 是在同一個父元素下且在特定元素==後==的**一個元素**會被修改(有相同父元素的子元素) ```html <!DOCTYPE html> <html> <head> <style> div + p { background-color: DodgerBlue; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> </div> <p>Paragraph 2. After a div.</p> <p>Paragraph 3. After a div.</p> </body> </html> ``` * paragraph2和`<div>`屬於同一個父元素且paragraph2在`<div>`之後 <div style="border: 1px solid;"> <div> <p>Paragraph 1 in the div.</p> </div> <p style="background-color: DodgerBlue;">Paragraph 2. After a div.</p> <p>Paragraph 3. After a div.</p> </div>  * general sibling selector (~) --> 是在同一個父元素下且在特定元素==後==的**所有元素**會被修改(有相同父元素的子元素) ```html <!DOCTYPE html> <html> <head> <style> div ~ p { background-color: DodgerBlue; } </style> </head> <body> <p>Paragraph 1.</p> <div> <p>Paragraph 2.</p> </div> <p>Paragraph 3.</p> <p>Paragraph 4.</p> </body> </html> ``` <div style="border: 1px solid;"> <p>Paragraph 1.</p> <p>Paragraph 2.</p> <p style="background-color: DodgerBlue;">Paragraph 3.</p> <p style="background-color: DodgerBlue;">Paragraph 4.</p> </div> ### 3. Pseudo-class selectors * 用來設定元素的狀態(可以搭配HTML class) * eg:滑鼠游標經過文字時會放大文字 * 使用順序：++a:link、a:visited -> a:hover -> a:active++ ```html <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } </style> </head> <body> <h2>Styling a link depending on state</h2> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html> ``` 滑鼠游標放到"This is a link"時字的顏色會變粉紅色 link: ![image](https://hackmd.io/_uploads/ByUqGd6s1l.png) hover: ![image](https://hackmd.io/_uploads/ByOuTITjJl.png) 其他指令舉例： * first-child -> 遇到某父類別中的第一個子元素 * lang -> 特定的語言會被修改 :::info :::spoiler link, visited, hover, active**區別**及**排列順序** * **link v.s. visited** * link：尚未被訪問的連結使用的格式 * visited：已被訪問的連結使用的格式 * **hover v.s. active** * hover：當鼠標懸浮於目標之上時所顯示的格式 * active：當鼠標按下左鍵(尚未釋放左鍵前)所展現的格式 * 在CSS的定義中，link, visited, hover, focus, active的排列有一定的順序，排列順序如下: ***link -> visited -> hover -> focus -> active*** ::: ### 4. Pseudo-elements selectors 用在修改特定部分的元素(可以搭配class使用、針對同一個元素可以多個Pseudo-elements一起使用)，例如一段文字中只修改第一行的風格。 * `::first-line`：第一行的的長度會依照網頁大小不同而不同(只能用在block-level的元素) ```html <style> p::first-line { color: #ff0000; font-variant: small-caps;/*字母改大寫形式，但尺寸與小寫字母相同(第一個字母除外)*/ } </style> </head> <body> <p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p> </body> ``` ![image](https://hackmd.io/_uploads/B1Jl9y6Ya.png) 其他舉例： * `::first-letter`：第一個字母(只能用在block-level的元素) * `::before`：在特定元素前插入一些內容 * `::after`：在特定元素後插入一些內容 * `::marker`：針對list編號修改風格 * `::selection`：設定當滑鼠游標選取某段文字時的風格，像是color、background、cursor和outline ### 5. Attribute selectors --> 依照attribute或attribute值的內容選擇元素有`target`屬性的才會修改風格，`target`也可以改成 `target="_blank"`代表屬性有特定值時才修改風格 ```html <style> a[target] { background-color: yellow; } </style> </head> <body> <h2>CSS [attribute] Selector</h2> <p>The links with a target attribute gets a yellow background:</p> <a href="https://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> </body> </html> ``` ![image](https://hackmd.io/_uploads/rk-MkgTta.png) 其他舉例： * `[attribute~="value"]`：屬性值為特定的單詞(空白分隔) * `[title~="flower"]`可調整的類別：`title="flower"`、 `title="klematis flower"` * `[attribute|="value"]`：屬性值為特定的文字(可以有'-'符號連接) *`[class~="top"]`可調整的類別：`class="top"`、`class="top-text"` * **不能**調整的類別：`class="topcontent"` * `attribute^= "value"`：屬性值由特定的文字開頭 * `[class~="top"]`可調整的類別：`class="top"`、`class="top-text"`、`class="topcontent"` * `attribute$= "value"`：屬性值由特定的文字結尾 * `[class$="test"]`可調整的類別： `class="first_test"`、 `class="my-test"`、`class="mytest"` * `attribute*= "value"`：屬性值為特定的文字(可以是某個詞的一部分) * eg：`[class*= "te"]` title有te文字都會被調整 * 針對特定的styling forms不用class或ID，依據input type去調整 * eg:`input[type="text"]` # 主要使用 CSS ## Background - background-color ` background-color: lightblue; /*把背景換藍色*/ ` - background-image ` background-image: url("paper.gif"); /*背景圖片是paper.gif*/ ` - background-repeat `background-repeat: repeat-x; /*水平重複*/` `background-repeat: repeat-y; /*垂直重複*/` `background-repeat: no-repeat;/*不重複*/` - background-attachment `background-attachment: fixed;/*固定背景*/` `background-attachment: scroll;/*滾動背景*/` - background-position `background-position: right top;/*右上*/` `background-position: left bottom;/*左下*/` ## Color 可以更改字的顏色或背景顏色，CSS裡有已命名好的顏色，也可以自己用別的方式去設定顏色，例如 - RGB - HEX - HSL ```html <!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <h3 style="background-color:Orange;">Hello World</h3> <h3 style="border:2px solid DodgerBlue;">Hello World</h3> <h3 style="background-color:rgb(255, 99, 71);">...</h3> <h3 style="background-color:#ff6347;">...</h3> <h3 style="background-color:hsl(9, 100%, 64%);">...</h3> <h3 style="background-color:rgba(255, 99, 71, 0.5);">...</h3> <h3 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h3> </body> </html> ``` - 做出來長這樣 ![螢幕擷取畫面 2024-01-21](https://hackmd.io/_uploads/BkCNSs5Yp.png) ## Box Model - Content - 內容，包含文字和圖像 - Padding - 框框跟內容的中間 - Border - 框框的樣式、大小以及顏色 - Margin - 框框外面的邊界大小 ![image](https://hackmd.io/_uploads/BkSQ63Ica.png) ```html <!DOCTYPE html> <html> <head> <style> div { background-color: yellow; width: 300px; border: 15px solid lightblue; padding: 50px; margin: 20px; } </style> </head> <body> <div>This is a example.</div> </body> </html> ``` - 做出來的樣子 ![image](https://hackmd.io/_uploads/rkC4ypIc6.png) ## Float `float: right;` - left - 靠左 - right - 靠右 - none - 預設 - inherit - 繼承父元素的設定 inline才能用，block不能用，因為block占據整個畫面無法靠左或靠右，可以利用display轉換成inline ## RWD 響應式網頁:可以根據不同的螢幕大小去設計一個有彈性的使用者介面 ```html <style> body { background-color: pink; //原本背景是粉色 } @media screen and (min-width: 480px) { //視窗大於480px時背景會變綠色 body { background-color: lightgreen; } } </style> ``` - 小於480px的樣子 ![image](https://hackmd.io/_uploads/rJ9mEaU9p.png) - 大於480px的樣子 ![image](https://hackmd.io/_uploads/HkREVaLca.png) ## Flex 可以有效率的調整排版，像是置中區塊、對齊內容，也可以配合響應式網頁進行換行，一個屬性只對單一方向排版以下是常見的屬性： - `display:flex;` //宣告此容器要使用flex - `flex-direction: column;` //控制主軸方向，row:水平方向; column:垂直方向 - `flex-wrap: wrap;` //wrap:換行; nowrap:不換 - `justify-content: center` //center:置中;flex-start:靠左;flex-end:靠右 - `align-items:center` //center:置中;flex-start:靠上;flex-end:靠下 Flexbox 的組成包含: - container : 父元素（容器） <div>元素 - items : container <div>中的項目 ![image](https://www.casper.tw/images/2017/flex/flex.png) 要有flex佈局，父容器就要將`dispaly`屬性設為`flex`，而內部第一層的子元素就會自動成為flex items :::spoiler Flex vs. Inline-Flex - Flex：彈性容器會變成block元素 `display: flex;` - Inline-Flex：彈性容器會變成inline元素 `display: inline-flex;` ::: --- ### Flex Container * [設定顯示方向及換行](#flex-flow:-設定顯示方向以及是否換行(為`flex-direction`與`flex-warp`的縮寫)) * [指定顯示方向](#flex-direction:-指定顯示方向) * [控制是否換行](flex-wrap:-控制超出範圍時是否換行) * [水平方向對齊](#justify-content:-控制主軸方向的對齊(通常為水平對齊)) * [單行垂直方向對齊](#align-items:-控制交錯軸方向的單行對齊(通常為垂直對齊)) * [整體垂直方向對齊](#align-content:-整體以交錯軸方向對齊) #### flex-direction: 指定顯示方向設定flex的軸線(主軸與交錯軸)，會影響內元件對齊。 * 下圖是預設軸線方向： ![image](https://www.casper.tw/images/2017/flex/flex-axis.png) * row - 預設值，讓物件沿左到右水平顯示 * 程式碼 ```html= <html> <head> <style> .flex-container { display: flex; flex-direction: row; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html> ``` * 結果預覽 <div style="display: flex; flex-direction: row; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> </div> * row-reverse - 讓物件由右到左水平顯示(水平反轉) * 程式碼 ```css= .flex-container { display: flex; flex-direction: row-reverse; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; flex-direction: row-reverse; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> </div> * column - 讓物件由上到下垂直顯示(主軸轉為垂直向下) * 程式碼 ```css= .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; flex-direction: column; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> </div> * column-reverse - 讓物件由下到上垂直顯示(主軸轉為垂直向上) * 程式碼 ```css= .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; flex-direction: column-reverse; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> </div> 以下是所有選項的示意圖： ![image](https://www.casper.tw/images/2017/flex/flex-direction.png) [go back to Flex-Container!](#Flex-Container) #### flex-wrap: 控制超出範圍時是否換行 * nowrap - 預設值，不換行 * 程式碼 ```css= .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; } ``` * 結果顯示 <div style="display:flex; flex-wrap:nowrap; background-color: DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">4</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">5</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">6</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">7</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">8</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">9</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">10</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">11</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">12</div> </div> * wrap - 超出範圍就換行，正著排(由上往下) * 程式碼 ```css= .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; flex-wrap:wrap; background-color: DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">4</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">5</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">6</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">7</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">8</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">9</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">10</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">11</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">12</div> </div> * wrap-reverse - 超出範圍就換行，倒著排(由下往上) * 程式碼 ```css= .flex-container { display: flex; flex-wrap: wrap-reverse; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; flex-wrap:wrap-reverse; background-color: DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">4</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">5</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">6</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">7</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">8</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">9</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">10</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">11</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">12</div> </div> [go back to Flex-Container!](#Flex-Container) #### flex-flow: 設定顯示方向以及是否換行(為`flex-direction`與`flex-warp`的縮寫) * 程式碼 ```css= .flex-container { display: flex; flex-flow: row wrap; background-color: DodgerBlue; } ``` * 結果顯示 <div style="display: flex; flex-flow: row wrap; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> [go back to Flex-Container!](#Flex-Container) #### justify-content: 控制主軸方向的對齊(通常為水平對齊) * center - 置中 * 程式碼 ```css= .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:center; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * flex-start - 預設值，讓內元件從 container 的主軸起始位置開始（通常是從左向右） * 程式碼 ```css= .flex-container { display: flex; justify-content: flex-start; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:flex-start; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * flex-end - 讓內元件從 container 的主軸末尾位置開始 * 程式碼 ```css= .flex-container { display: flex; justify-content: flex-end; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:flex-end; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * space-around - 內元件彼此間距相等，且邊緣留有內元件間距的一半 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-around; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:space-around; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * space-between - 內元件彼此間距相等，且兩端內元件貼齊邊緣 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-between; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:space-between; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * space-evenly - 內元件彼此間距相等，且邊緣空間也和間距一樣大 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-evenly; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; justify-content:space-evenly; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> [go back to Flex-Container!](#Flex-Container) #### align-items: 控制交錯軸方向的單行對齊(通常為垂直對齊) * center - 單行置中(高度平均分配) * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: center; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; height:200px; align-items:center; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * flex-start - 從 container 的交錯軸起始位置開始（通常是從上到下） * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: flex-start; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; height:200px; align-items:flex-start; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * flex-end - 從 container 的交錯軸末尾位置開始（通常是從下到上） * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: flex-end; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; height:200px; align-items:flex-end; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * stretch - 預設值(等同於normal)，若內元件未設置高度或設為auto，內元件會在交錯軸伸縮以符合 container * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: stretch; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; height:200px; align-items:stretch; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">1</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">2</div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;">3</div> </div> * baseline - 內元件依字符底部基準線擺放，用在子元素的字體大小不同時。 * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: baseline; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display:flex; height:200px; align-items:center; background-color:DodgerBlue;"> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;"><h1>1</h1></div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;"><h6>2</h6></div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;"><h3>3</h3></div> <div style="background-color:#f1f1f1; width:100px; margin:10px; text-align:center; line-height:75px; font-size:30px;"><small>4</small></div> </div> [go back to Flex-Container!](#Flex-Container) #### align-content: 整體以交錯軸方向對齊 * center - 整體置中於 container * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: center; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * stretch - 預設值，整體一起伸縮以填滿整個 container * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * flex-start - 整體從 container 的交錯軸起始位置開始(通常為上方) * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * flex-end - 整體從 container 的交錯軸末尾位置開始(通常為下方) * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * space-between - 整體的行間距相等，邊緣貼齊交錯軸始末兩端 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: sapce-between; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * space-around - 整體的行間距相等，且邊緣(通常為上下)留有內部間距的一半 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: sapce-around; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: space-around; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> * space-evenly - 整體間距相等，且邊緣空間(通常為上下)也和間距一樣大 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-evenly; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽 <div style="display: flex; height: 600px; flex-wrap: wrap; align-content: space-evenly; overflow: scroll; background-color: DodgerBlue;"> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">1</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">8</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">9</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">10</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">11</div> <div style="background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px;">12</div> </div> [go back to Flex-Container!](#Flex-Container) --- ### Flex Items [The order Property](#The-order-Property:) [The flex-grow Property](#flex-grow) [The flex-shrink Property](#The-flex-shrink-Property) [The flex-basis Property](#The-flex-basis-Property) [The flex Property](#The-flex-Property) [The align-self Property](#The-align-self-Property) 在 flex container 中的直接子元素(direct child elements)會自動變成 flex items。 :::info flex items 的CSS的屬性有 : * order * flex * flex-grow * flex-shrink * flex-basis * align-self ::: #### The order Property : * order屬性指定了 flex items 在 flex container 中的順序(由小排到大)，==order值必須為整數，預設值為0，可為負值==。 * 程式碼 ```html= <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div style="order: 2">1</div> <div style="order: 1">2</div> <div style="order: 3">3</div> <div style="order: -1">4</div> </div> </body> </html> ``` * 結果預覽 <div style="display: flex; align-items: stretch; background-color: #f1f1f1;"> <div style="background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; order: 2">1</div> <div style="background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; order: 1">2</div> <div style="background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; order: 3">3</div> <div style="background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; order: -1">4</div> </div> #### flex-grow * flex-grow 屬性指定了有剩餘空間時一個 flex items相對於其他 flex items可以在主軸方向上擴展的比例，預設值為0，可為小數不可為負值。 * 程式碼 ```html= <body> <div class="flex-container"> <div style="flex-grow: 0.5">1</div> <div style="flex-grow: 0.5">2</div> <div style="flex-grow: 4">3</div> </div> </body> ``` * 結果預覽 <div style="display: flex; align-items: stretch; width:550px;background-color: #f1f1f1;"> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 30px; text-align: center; line-height: 75px; font-size: 30px; flex-grow: 0.5">1</div> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 30px; text-align: center; line-height: 75px; font-size: 30px; flex-grow: 0.5">2</div> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 30px; text-align: center; line-height: 75px; font-size: 30px; flex-grow: 4">3</div> </div> :::spoiler 如何計算擴展比例? 1. 設總寬為550px，內元件三個各先消耗30px，還有內元件兩側的margin長度各為10px，剩餘空間為400px(550-30\*3-10\*6)。 1. 計算flex-grow比例總和(0.5 : 0.5 : 4)得5，400/5=80px，前兩個元件增寬40px(80\*0.5=40)，最後的元件增寬320px(80\*4=320) * 以上算式可參考上方「結果預覽」的詳細尺寸 ::: #### flex-shrink * flex-shrink 屬性指定了當items超出空間時一個 flex items相對於其他 flex items可以被壓縮的比例，==預設值為1，可為小數，不可為負值，不想被壓縮可設為0==。 * 程式碼 ```html= <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 3">3</div> </div> ``` * 結果預覽  <div style="display: flex; align-items: stretch; width:550px;background-color: #f1f1f1;"> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 180px; text-align: center; line-height: 75px; font-size: 30px; flex-shrink: 1">1</div> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 180px; text-align: center; line-height: 75px; font-size: 30px; flex-shrink: 1">2</div> <div style="background-color: DodgerBlue; color: white; margin: 10px; width: 180px; text-align: center; line-height: 75px; font-size: 30px; flex-shrink: 3">3</div> </div> :::spoiler 如何計算壓縮比例? 1. 設總寬為550px，內元件三個寬度各為180px，margin都為10px，則超出空間為50px(180\*3+10\*6-550=50)。 1. 計算壓縮權重(1\*180+1\*180+3\*180=900)為900px，將50px/900px=1/18為壓縮比率，前兩個元件壓縮10px(180/18=10)，最後的元件壓縮30px(180/18\*3=30) 1. 前兩個元件的寬度為170px(180-10=170)，最後的元件為150px(180-30=150) * 以上算式可參考上方「結果預覽」的詳細尺寸 ::: #### flex-basis * 指定 flex items (子元素)的初始長度，會因為 flex-direction 的不同而改變指定長度的對象(row->width/column->height)，預設值為0 ```html= <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div> ``` ![image](https://hackmd.io/_uploads/rJp_cLZjJg.png) #### The flex Property * flex 屬性是一個簡寫屬性，用於 flex-grow、flex-shrink 和 flex-basis 屬性。 * 如果 flex 只填了一個數值，預設是調整「flex-grow」的效果。 * not growable (0), not shrinkable (0), 初始長度為 200 pixels: ```html= <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div> ``` ![image](https://hackmd.io/_uploads/rk1hkg4j1l.png) #### The align-self Property * align-self 屬性指定 flex items 在flex container 內的對齊方式(只適用於交錯軸)。align-self 屬性會覆蓋容器的 align-items 屬性設置的預設對齊，因此可個別設定items的值。 * 將第三個項目對齊到container中間 ```html= <html> <head> <style> .flex-container { display: flex; height: 200px; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> </body> ``` ![image](https://hackmd.io/_uploads/HkY8QDWo1g.png =80%x) * 將第二個items對齊到 container 頂端，第三個items對齊到 container 底端 ```html= <div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> ``` ![image](https://hackmd.io/_uploads/r10QBwWj1g.png =80%x) ---------------------------------------------- #### Responsive Flexbox * 當頁面寬度超過800px時，flex-direction 會由row變成column ```html= .flex-container { display: flex; flex-direction: row; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } } ``` * 另外一個方法:更改 flex items 中 flex 的百分比，以產生適合各種螢幕尺寸的佈局，==記得在.flex-container中也要放flex-wrap: wrap== ```html= .flex-container { display: flex; flex-wrap: wrap; } .flex-item-left { flex: 50%; } .flex-item-right { flex: 50%; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; } } ``` ## Grid 可以幫忙分配版面，將版面切成網格狀 [直接上w3schools教學](https://www.w3schools.com/css/css_rwd_grid.asp) - 有兩種寫法(block、inline) ```css grid-container { display: grid; //display寫grid } grid-container { display: inline-grid; //display寫inline-grid } ``` - column示意 ![image](https://hackmd.io/_uploads/S19QnTLcT.png) - row示意 ![image](https://hackmd.io/_uploads/S1cz3a8q6.png) - column-gap、row-gap示意 ![image](https://hackmd.io/_uploads/BJWW36U96.png) ### Grid Container Container 內 Item 行列的排列方式可由 ``` .grid-container1 { display: grid; grid-template-columns: auto 80px 1fr 30%; /*n個變數代表一行n個Item，這行有4個*/ grid-template-rows: auto auto;/*n個變數代表一列n個Item，這行有2個，假如有第三行(這個例子大於9個item)，grid-auto-rows可統一控制*/ } .grid-container2 { display: grid; grid-template: 100px 200px 50px/ 150px 150px ;/*三行兩列*/ } .grid-container3 { display: grid; grid-template: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 50px; } ``` ![螢幕擷取畫面 2025-03-04 223700](https://hackmd.io/_uploads/HkHVgcVj1g.png) :::spoiler ``` <!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto 80px 1fr 30%; grid-template-rows: auto auto; grid-auto-rows: 50px; gap: 10px; border: 2px solid black; padding: 10px; } .grid-container div { background-color: lightblue; padding: 10px; text-align: center; border: 1px solid darkblue; } .grid-container2 { display: grid; grid-template: 100px 200px 50px / 150px 150px; gap: 10px; border: 2px solid black; padding: 10px; } .grid-container2 div { background-color: lightcoral; padding: 10px; text-align: center; border: 1px solid darkred; } .grid-container3 { display: grid; grid-template: "header header" "sidebar main" "footer footer" ; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 50px; gap: 10px; border: 2px solid black; padding: 10px; } .grid-container3 .header { grid-area: header; background-color: lightgreen; } .grid-container3 .sidebar { grid-area: sidebar; background-color: lightpink; } .grid-container3 .main { grid-area: main; background-color: lightyellow; } .grid-container3 .footer { grid-area: footer; background-color: lightgray; } .grid-container3 div { padding: 10px; text-align: center; border: 1px solid darkgray; } </style> </head> <body> <h2>Grid Container 1</h2> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <h2>Grid Container 2</h2> <div class="grid-container2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <h2>Grid Container 3</h2> <div class="grid-container3"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="main">Main Content</div> <div class="footer">Footer</div> </div> </body> </html> ``` ::: * auto：根據內容自適應寬度。 * px：固定單位px。 * % ：Container寬度的幾%。 * fr：剩餘的可用空間的幾等分。 minmax(min, max)可設定縮放的最大與最小。 repeat(3, 1fr) 同等於 1fr 1fr 1fr。以及展示 ``` .grid-container { display: grid; place-content:center;/*上下左右*/ justify-content:center;/*左右*/ align-content:center;/*上下*/ } ``` | 參數種類 |意思 |例圖(justify-content)| | -------- | -------- | -------- | | start | 貼齊上/左 | ![螢幕擷取畫面 2025-03-04 160135](https://hackmd.io/_uploads/Sy2GNVViJx.png)| | end | 貼齊下/右|![螢幕擷取畫面 2025-03-04 160150](https://hackmd.io/_uploads/rJwmN4VoJl.png)| | center | 置中(不填滿上下左右) |![螢幕擷取畫面 2025-03-04 160204](https://hackmd.io/_uploads/S1HrVNEske.png)| |space-between|平分畫面且間隔相等，邊界沒有間隔|![螢幕擷取畫面 2025-03-04 160301](https://hackmd.io/_uploads/SyWLN44iJl.png)| |space-around|平分畫面且間隔相等，邊界間隔只有一半寬|![螢幕擷取畫面 2025-03-04 160334](https://hackmd.io/_uploads/rksLVV4syx.png)| |space-evenly|平分畫面且間隔相等，邊界有同等間隔|![螢幕擷取畫面 2025-03-04 160409](https://hackmd.io/_uploads/H1HwNNNoye.png)| 需注意剩餘空間是否足以安插間隔。 ### Grid properties * `Grid Lines` 可以決定item的大小 - 第一種寫法 : 從row1到row3，下面圖片的第一格 ```css .item1 { grid-column-start: 1; //起始row grid-column-end: 3; //結束row } ``` ![image](https://hackmd.io/_uploads/ByNHCTU9p.png) - 第二種寫法 : 從row1到row5，下面圖片的第一格 ```css .item1 { grid-column: 1 / 5; } ``` ![image](https://hackmd.io/_uploads/S1eGk08cp.png) - 第三種寫法 : 用格子算，從第一格到第三格，下面圖片的第一格 ```css .item1 { grid-column: 1 / span 3; } ``` ![image](https://hackmd.io/_uploads/B1pKk0IcT.png) * 程式碼 ```html= <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px; background-color: DodgerBlue; padding: 10px; } .grid-container > div { background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px; } .item1 { grid-column-start: 2; grid-column-end: 4; } </style> </head> <body> <div class="grid-container"> <div class="item1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> </html> ``` * 結果預覽 <div style="display: grid; grid-template-columns: auto auto auto; gap: 10px; background-color: DodgerBlue; padding: 10px;"> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px; grid-column-start: 2; grid-column-end: 4;">1</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">8</div> </div> * 說明設定 `item1` 元素會從第二列開始，到第四列結束 (佔 2 列)，可參照上方 grid line 定義 * grid-column - 為 grid-column-start 和 grid-column-end 的縮寫 * 以上方例子，可改成以下兩種方式 ```css= .item1 { grid-column: 2 / 4; } ``` ```css= .item1 { grid-column: 2 / span 2; } ``` * span 指的是「空的格數」 * grid-row-start / grid-row-end - 定義元素開始與結束列行的位置 * 程式碼 ```css= .item1 { grid-row-start: 1; grid-row-end: 3; } ``` * 結果預覽 <div style="display: grid; grid-template-columns: auto auto auto; gap: 10px; background-color: DodgerBlue; padding: 10px;"> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px; grid-row-start: 1; grid-row-end: 3;">1</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">2</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">3</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">4</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">5</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">6</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">7</div> <div style="background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 30px;">8</div> </div> * grid-row - 為 grid-row-start 和 grid-row-end 的縮寫 * grid-auto-columns - 指定隱式網格的列的大小 * 程式碼 ```css= .grid-container { display: grid; grid-template-columns: 100px 100px; /*指定義兩個顯式列*/ grid-auto-flow: column; /*讓其他不在顯示列的欄位向右排列*/ grid-auto-columns: 150px; /*未使用顯式定義的其他隱式列皆為150px*/ gap: 10px; background-color: #f1f1f1; padding: 10px; overflow-x: auto; /*超出範圍可滾動*/ } ``` * 結果預覽 <div style="display: grid; grid-template-columns: 100px 100px; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; background-color: #f1f1f1; padding: 10px; overflow-x: auto;"> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">1</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">2</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">3</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">4</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">5</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">6</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">7</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">8</div> </div> * 說明若有元素超過顯式定義的列範圍，寬度就設為 150px，顯式定義的 column 只有兩個參數，只定義了 line1 和 line2，所以會是 100px，剩下的 items 就會以 150px 顯示 * grid-auto-rows - 指定隱式網格的行的大小 * 程式碼 ```css= .grid-container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-flow: row; grid-auto-rows: 150px; gap: 10px; background-color: #f1f1f1; padding: 10px; } ``` * 結果預覽 <div style="display: grid; grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-flow: row; grid-auto-rows: 150px; gap: 10px; background-color: #f1f1f1; padding: 10px;"> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">1</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">2</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">3</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">4</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">5</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">6</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">7</div> <div style="background-color: DodgerBlue; padding: 20px; text-align: center; font-size: 20px;">8</div> </div> * grid-auto-flow - 決定隱式元素擺放位置 * row: 預設值，自動填充 * column: 自動填充 * dense: 允許重新排列元素子填補空隙 :::spoiler 什麼是隱式網格? * 顯式網格(explicit grid): 由開發者設定出來的 grid > 可以透過 grid-template-columns 和 grid-template-rows 來設定形成網格的固定數量和軌道(手動設定) * 隱式網格(implicit grid): 除了顯式網格外，其他不存在的網格，由 grid 自動產生 > 即可透過 grid-auto-columns 和 grid-auto-rows 來定，若有元素超出顯式定義的範圍，就以其值作為極限值 ::: * grid-area - 定義空間名稱或位置，將 grid-row-start、 grid-column-start、 grid-row-end、 grid-column-end 一起表示 * 使用方式 ```css= .item1 { grid-area: 1 / 2 / 3 / 4; } ``` * grid-template-areas - 定義網格區域名稱，搭配 grid-area 使用 * 程式碼 ```css= .container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } ``` * 結果預覽 <div style="display: grid; grid-template-areas: 'header header' 'sidebar main' 'footer footer'; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 50px; gap: 10px; background-color: #f1f1f1; padding: 10px;"> <div style="grid-area: header; background-color: DodgerBlue; text-align: center; padding: 20px; font-size: 20px;">Header</div> <div style="grid-area: sidebar; background-color: DodgerBlue; text-align: center; padding: 20px; font-size: 18px;">Sidebar</div> <div style="grid-area: main; background-color: DodgerBlue; text-align: center; padding: 20px; font-size: 18px;">Main Content</div> <div style="grid-area: footer; background-color: DodgerBlue; text-align: center; padding: 20px; font-size: 18px;">Footer</div> </div> * grid-template * grid-template-areas的縮寫。 * grid-template-rows和grid-template-columns同時控制。 * grid-template-rows - 設置內元素的高度。 * grid-template-columns - 設置內元素的寬度。 * 重複設定 `grid-template-columns: 1fr 1fr 1fr 1fr;`，可寫成 `grid-template-columns: repeat(4, 1fr);` * (grid-)row-gap - 水平間隔距離(row跟row的距離)。 * (grid-)column-gap - 垂直間隔距離(column跟column的距離)。 * (grid-)gap - row-gap 和 column-gap同時控制。 ## CSS Responsive * RWD(Responsive Web Design) 網頁可以透過桌機、平板電腦和手機查看，且同一個網站有各種不同的版面呈現，顯示的字級大小也不同，響應式網頁可以讓使用者易於瀏覽，同時也減少在行動裝置上閱讀時的縮放和移動等動作。 ### RWD Viewport * 根據裝置的顯示區域來展示文件 * 放大或縮小文件，來符合或設定中給予裝置的可視區域 * 允許設定或初始化縮放的級別，或是其他規則 * viewport是跟著裝置顯示在運作的，但跟Media Query 不太一樣 @viewport 有絕對優先權，所以它會比 @media 還要早執行 ![image](https://hackmd.io/_uploads/H1-xiy4s1x.png) * device-width 可以理解為我們所看見的裝置的寬度，而當該顯示文本遇到768px這個條件時，顯示結果會依據@media而決定 * @viewport 有兩種 1. initial viewport initial viewport 是指裝置本身的實際展示的尺寸或相關設定 2. actual viewport actual viewport 是指經由 initial viewport 初始化後，內容本文的展示尺寸或相關設定 > 參考資料: https://blog.hinablue.me/viewport-the-css-device-adaptation/ ### RWD Grid View 使用grid進行布局，可用在設計不同視窗大小下改變不同布局。 ### RWD Media Queries 利用@media讓不同視窗大小的布局改變 * @media (max-width:632px) 視窗不超過632px套用。 * @media screen and (min-width:632px) 設備為screen且視窗不超過632px套用。 * @media only screen and (min-width:632px) 同上，only可以篩去過舊的瀏覽器。 * @media only screen and (orientation: portrait) 縱向，寬度大於高度。 * @media only screen and (orientation: landscape) 橫向，寬度小於高度。可用在grid排版，和改變style ``` @media (max-width: 600px) { div.example { display: none; } } @media only screen and (max-width: 800px) { .grid-container { grid-template-columns: repeat(3, 1fr); /* 3列排版 */ } } @media only screen and (max-width: 500px) { .grid-container { grid-template-columns: 1fr; /* 1列排版 */ } ``` ---------------------------------------------------- ### Animation * `animation: mymove 5s infinite;` 也可以這樣寫: - animation-name: (@keyframes後面的名字); - animation-iteration-count:(放一個值//3就3次,infinite就無限多次) - animation-duration: 5s(s前面放多少就幾秒) ```css @keyframes mymove { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } ``` - 前面的幾%代表動畫的時間點 ### Transform * transform可以讓html元素(包含內容)被位移、旋轉、縮放和傾斜，分為2D和3D * transform 屬性可為none、一個或多個transform-function ```css div { transform: rotate(20deg); } ``` #### 2D <div style=" background: rgba(30, 144, 255, 0.35); border-radius: 20px; width: 100px; height: 100px; text-align: center; display: flex; align-items: center; justify-content: center; transition: transform 1s; animation: spin 5s infinite linear; ">Rotate</div> ##### Transform-origin 元素的原始位置(參考點) * elememt(x,y) * 位移、旋轉、縮放、傾斜的參考點 * x、y可為尺寸值或 % (百分比) 或方位關鍵字；% 是以元素本身大小作為計算基準 * 預設值為元素中心點(50%,50%) * 元素左上角座標為原點(0,0) * 方位關鍵字(center,top,right,bottom,left)，如忽略第二個值，則自動定為center ##### transform property * translate(x, y) 偏移 * x: 水平移動，可用`translateX()` * y: 垂直移動，可用`translateY()` * 程式碼 ```css div { transform: translate(50px, 20px); } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: translate(50px, 20px);">translate</div> </div> * scale(x, y) 縮放 * x: 縮放寬度 * y: 縮放高度 * 程式碼 ```css div { transform: scale(1.5, 0.8); } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: scale(1.5, 0.8);">scale</div> </div> * rotate(angle) 元素以參考點為中心進行旋轉 * 正值: 順時針旋轉 * 負值: 逆時針旋轉 * 程式碼 ```css div { transform: rotate(25deg); } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: rotate(25deg);">rotate</div> </div> * skew(x-angle, y-angle) 傾斜，元素以參考點為中心進行拉伸變形 * 單位: deg * 只寫一個參數就只有X軸的傾斜 * 程式碼 ```css div { transform: skew(30deg, 10deg); transform-orgin: top left; } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: skew(30deg, 10deg); transform-orgin: top left; ">skew</div> </div> * matrix(a, b, c, d, e, f) 元素以參考點為中心，依變形矩陣的6個參數值產生2D變形。 * a: scaleX() * b: skewY() * c: skewX() * d: scaleY() * e: translateX() * f: translateY() * 程式碼 ```css div { transform: matrix(1, 0, 0, 1, 50, 50); } ``` * 結果預覽 <div style="border: solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: matrix(1, 0, 0, 1, 50, 50);">matrix</div> </div> * 同一元素套用多個變形函數函數間以半形空格間隔 ```css .box{ transform:translate(120px) rotate(80deg) scale(0.5); } ``` #### 3D :::info 1. 好用的工具-->可以直接找到result測試結果 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function ::: * transform-orgin: 元素原始位置，表示為element(x, y, z) * transform-style: 定義是3D或是2Dtransform，屬性值分為flat(預設2D)和preserve-3d * perspective: 透視距離，即觀看位置到元素的距離，預設是0 * perspective-origin: 透視原點，perspective-origin:(x,y)，x可為長度值、百分比及方向關鍵字: left、center、right，y可為長度值、百分比及方向關鍵字: top、center、bottom，預設值(x,y)都為50% * backface-visibility: 定義元素背面是否可見，屬性值為hidden和visible -------- <div class="rotate3D">3D rotate</div> <style> .rotate3D { background: red; color: #f1f1f1; width: 80px; height: 70px; font-weight: bold; border: solid #000000; text-align: center; display: flex; align-items: center; justify-content: center; /* 讓 3D 效果可見 */ perspective: 500px; transform-origin: center; /* 讓它持續旋轉 */ animation: rotateY 3s infinite linear; } @keyframes rotateY { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> ------ <div style=" background: blue; color: white; width: 100px; height: 100px; text-align: center; display: flex; align-items: center; justify-content: center; transition: transform 1s; animation: spin 2s infinite linear; @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } ">Rotating </div> -------- ##### transform property * translate3d(x, y, z) * x: 以參考點為中心，向X軸位移x距離 * y: 以參考點為中心，向Y軸位移y距離 * z: 以參考點為中心，向Z軸位移z距離 * 程式碼 ```css div { transform: translate3d(10px, 50px, 70px); } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: translate3d(10px, 50px, 70px);">translate3d</div> </div> * scale3d(x, y, z) * x: 以X軸做縮放 * y: 以Y軸做縮放 * z: 以Z軸做縮放 * 程式碼 ```css div { transform: scale3d(0.8, 0.8, -0.5); } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: scale3d(0.8, 0.8, -0.5);">scale3d</div> </div> * rotate3d(x, y, x, angle) * x: 以X軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * y: 以Y軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * z: 以Z軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * angle: 以參考點為中心做旋轉 * 程式碼 ```css div{ transform: rotate3d(1, 1, 1, 30deg); } ``` * 結果預覽 <div style="border: 1px solid"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: rotate3d(1, 1, 1, 30deg);">rotate</div> </div> * matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) * 4x4的矩陣，共16個值 $$ \begin{matrix} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \end{matrix} $$ * 上方矩陣參數，分別對應的函數，()內的值為預設值 $$ \begin{matrix} scaleX & scaleY & scaleZ & translateX \\ rotateX & rotateY & rotateZ & translateY \\ skewX & skewY & skewZ & translateZ \\ perspective(0) & perspective(0) & perspective(0) & perspective(1) \end{matrix} $$ * 程式碼 ```css div { transform: matrix3d( 0.7, 0.1, 0.7, 0, -0.6, 0.7, 0.2, 0, -0.5, -0.8, 0.7, 0, 10, 10, 0, 1 ) } ``` * 結果預覽 <div style="border: 1px solid;"> <div style="background-color: rgba(30, 144, 255, 0.35); text-align: center; height: 100px; transform: matrix3d(0.7, 0.1, 0.7, 0, -0.6, 0.7, 0.2, 0, -0.5, -0.8, 0.7, 0, 10, 10, 0, 1);">matrix3d</div> </div> * perspective(n) * 定義 3D 變換元素的透視視圖，讓遠離視點的物件縮小 * 程式碼 ```css div { transform: perspective(5cm); } ``` * 結果預覽 <div style="border: 1px solid; display: flex; justify-content: center;"> <div style="transform: perspective(5cm) rotateX(-15deg) rotateY(30deg); background-color: rgba(30, 144, 255, 0.35); text-align: center; width: 100%;">perspective</div> </div> ### Transition 在特定時間段內可以平順的改變設計，例如:滑鼠游標放到字上面可以自動放大字體 #### Transition property: - transition - transition-property: 指定要轉換的CSS屬性 - transition-duration: 轉換需要的時間，預設0，單位為s或ms - transition-delay: 延遲多久轉換，預設0，單位為s或ms - transition-timing-function: 轉換時的速度曲線，預設為ease ---------------------------------------------- ## Text Alignment 用於文字的水平對齊，作用對象是物件內的文字 ```css text-align: left; ``` text-align設定的值已關鍵字為主，可以設定的值有 - left(對齊左側) - right(對齊右側) - center(置中) - justify(左右對齊) - inherit(和父元素相同) - initial

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.