排版方式(2)：flex大顯神威

# 排版方式(2)：flex大顯神威 ###### tags: `NKFW 網頁設計入門` ## 格式 :::success ❓如果使用上有值得思考的問題，就寫在此處 ::: :::warning ⚠️注意(觀念澄清) ::: # 啟用方式 :::info 在`container`上設定`display: flex`，下一層的標籤會變成flex物件。 ::: 先上範例，再來解釋flex物件可以有甚麼屬性。 * CSS ```css! .container{ width: 960px; display: flex; justify-content: center; } ``` * HTML ```htmlembedded! <div class="container"> <div class="column"> Lorem... </div> <div class="column"> Lorem... </div> <div class="column"> Lorem... </div> </div> ``` :::info * 目前可以看到，`display: flex`，加上`justify-content: center`會讓內容置中。 * CSS設定都要寫在container裡面（就是你要控制的標籤的上一層），才會有效 ::: # 什麼是主軸&次軸瞭解flex可以做哪些設定之前，我們先來建立一些觀念 * 由`flow-direction`決定資料的方向 * 資料排列的方向是主軸，另一個垂直的方向就是次軸 ![](https://i.imgur.com/Pw7Gtkw.jpg) # 常用設定 * `flow-direction`: 排版方向 * `justify-content`: 控制主軸 * `align-items`: 控制次軸 * `align-content`: 控制次軸 # 範例底下是一個flex排版的範例，請大家自行取用 ```xml= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, html{ width:100%; height:100%; } .container{ width: 800px; height:800px; background-color:lightskyblue; /* flex設定 */ display: flex; } .column{ font-size: 50px; width: 140px; height: 140px; border: 2px dashed blueviolet; } </style> </head> <body> <div class="container"> <div class="column"> A </div> <div class="column"> B </div> <div class="column"> C </div> </div> </body> </html> ``` # 排版方向：flex-direction 控制排版的方向(也就是主軸的方向)，以及排版的順序(也就是主軸的起始點&終點)。主要有以下幾種屬性值： * row：水平排列 * column：垂直排列 * row-reverse：水平排列+順序倒過來 * column-reverse：垂直排列+順序倒過來 ### flex-direction: row ```xml= <style> .container{ /* flex設定 */ display: flex; flex-direction: row; } </style> ``` ![](https://i.imgur.com/QMkhRQl.png) ### flex-direction: column ```xml= <style> .container{ /* flex設定 */ display: flex; flex-direction: column; } </style> ``` ![](https://i.imgur.com/dxC3uHN.png) ### flex-direction: row-reverse ```xml= <style> .container{ /* flex設定 */ display: flex; flex-direction: row-reverse; } </style> ``` ![](https://i.imgur.com/nqf7U81.png) ### flex-direcion: column-reverse ```xml= <style> .container{ /* flex設定 */ display: flex; flex-direction: column-reverse; } </style> ``` ![](https://i.imgur.com/qf1oHZo.png) ## 控制主軸： justify-content `justify-content`負責控制主軸的排版 :::info 如果設定`flex-direction: row`(設定主軸為水平方向)，則`justify-content`就會控制在水平方向上的排版。 ::: `justify-content`主要有以下幾種屬性值 * start：聚集在主軸的起點 * center：聚集在主軸的中間 * end：聚集在主軸的終點 * space-around：將margin分配到標籤的兩側 * space-between：將margin分配到標籤的中間 * space-evenly：使margin等寬 ### justify-content: start ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: start; } </style> ``` ![](https://i.imgur.com/e4Du435.png) ### justify-content: center ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: center; } </style> ``` ![](https://i.imgur.com/3t1ARUv.png) ### justify-content: end ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: end; } </style> ``` ![](https://i.imgur.com/bnBfTK1.png) ### justify-content: space-around ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: space-around; } </style> ``` ![](https://i.imgur.com/Zk66MOO.png) ### justify-content: space-between ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: space-between; } </style> ``` ![](https://i.imgur.com/Wjp1Yvl.png) ### justify-content: space-evenly ```xml= <style> .container{ /* flex設定 */ display: flex; justify-content: space-evenly; } </style> ``` ![](https://i.imgur.com/p0qdmDZ.png) ## Project1 :::info 做一個三欄版面吧 * 裡面放甚麼都可以 ::: ![](https://i.imgur.com/S4Q6ogF.png) ## 控制副軸-單行: align-items `jalign-items`負責控制副軸的排版 :::info 如果設定`flex-direction: row`(設定主軸為水平方向，副軸則為垂直方向)，則`align-items`就會控制在垂直方向上的排版。 ::: `align-items`主要有以下幾種屬性值 * start：排列在副軸的起點 * center：排列在副軸的中間 * end：排列在副軸的終點 * stretch：伸長container底下的標籤在副軸方向上的長度 ### align-items: start ```xml= <style> .container{ /* flex設定 */ display: flex; align-items: start; } </style> ``` ![](https://i.imgur.com/gSXD9s5.png) ### align-items: center ```xml= <style> .container{ /* flex設定 */ display: flex; align-items: center; } </style> ``` ![](https://i.imgur.com/IdtLgku.png) ### align-items: end ```xml= <style> .container{ /* flex設定 */ display: flex; align-items: end; } </style> ``` ![](https://i.imgur.com/5n4bG23.png) ### align-items: strech ```xml= <style> .container{ /* flex設定 */ display: flex; align-items: strech; } .column{ height: auto; } </style> ``` ![](https://i.imgur.com/2xyJ4eh.png)  ## flex的特性小結 * 預設`flex-direction: row` * 預設`justify-content: start` * 預設的flex物件會等高 ## Project2 :::info 做一個滿版背景，中間放文字區塊 * 用flex使文字區塊置中 * 做一些簡單的美化看起來讓他好看一點 ::: :::warning ⚠️注意! 如果父層容器沒有任何高度，是無法垂直置中的! ::: ![](https://i.imgur.com/SJ0EBkR.jpg) ## Project 3 (Optional) :::info 把先前做過的自我介紹做一些小改造： * 畫面左邊1/3的部份放自己的個人簡介 * 畫面右邊2/3的部份放剩下的內容 * 使用flex來控制這兩個區塊 ::: ![](https://i.imgur.com/JTM3z30.png) :::success ❓為什麼我切出來的版面兩個會一樣高呢要怎麼做才會讓他們恢復到自身的高度試著自己上網查相關的資料 :::