# 排版方式(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) <!-- ## 控制副軸-多行： align-content ![](https://i.imgur.com/GcLntnh.png) ![](https://i.imgur.com/ERlVA3A.png) ![](https://i.imgur.com/xqZGZs2.png) ![](https://i.imgur.com/FaDKnNd.png) ![](https://i.imgur.com/USIZFEi.png) ![](https://i.imgur.com/k4SrsHo.png) ![](https://i.imgur.com/IVeJUVx.png) ![](https://i.imgur.com/TJWDMq6.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 ❓為什麼我切出來的版面兩個會一樣高呢 要怎麼做才會讓他們恢復到自身的高度 試著自己上網查相關的資料 :::