---
# System prepended metadata
title: 排版方式(2)：flex大顯神威
tags: [NKFW 網頁設計入門]
---
# 排版方式(2)：flex大顯神威
###### tags: `NKFW 網頁設計入門`
## 格式
:::success
❓如果使用上有值得思考的問題，就寫在此處
:::
:::warning
⚠️注意(觀念澄清)
:::
# 啟用方式
:::info
在`container`上設定`display: flex`，下一層的標籤會變成flex物件。
:::
先上範例，再來解釋flex物件可以有甚麼屬性。
* CSS
```css!
.container{
width: 960px;
display: flex;
justify-content: center;
}
```
* HTML
```htmlembedded!
Lorem...
Lorem...
Lorem...
```
:::info
* 目前可以看到，`display: flex`，加上`justify-content: center`會讓內容置中。
* CSS設定都要寫在container裡面（就是你要控制的標籤的上一層），才會有效
:::
# 什麼是主軸&次軸
瞭解flex可以做哪些設定之前，我們先來建立一些觀念
* 由`flow-direction`決定資料的方向
* 資料排列的方向是主軸，另一個垂直的方向就是次軸
# 常用設定
* `flow-direction`: 排版方向
* `justify-content`: 控制主軸
* `align-items`: 控制次軸
* `align-content`: 控制次軸
# 範例
底下是一個flex排版的範例，請大家自行取用
```xml=
Document
```
# 排版方向：flex-direction
控制排版的方向(也就是主軸的方向)，以及排版的順序(也就是主軸的起始點&終點)。主要有以下幾種屬性值：
* row：水平排列
* column：垂直排列
* row-reverse：水平排列+順序倒過來
* column-reverse：垂直排列+順序倒過來
### flex-direction: row
```xml=
```
### flex-direction: column
```xml=
```
### flex-direction: row-reverse
```xml=
```
### flex-direcion: column-reverse
```xml=
```
## 控制主軸： 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=
```
### justify-content: center
```xml=
```
### justify-content: end
```xml=
```
### justify-content: space-around
```xml=
```
### justify-content: space-between
```xml=
```
### justify-content: space-evenly
```xml=
```
## Project1
:::info
做一個三欄版面吧
* 裡面放甚麼都可以
:::
## 控制副軸-單行: align-items
`jalign-items`負責控制副軸的排版
:::info
如果設定`flex-direction: row`(設定主軸為水平方向，副軸則為垂直方向)，則`align-items`就會控制在垂直方向上的排版。
:::
`align-items`主要有以下幾種屬性值
* start：排列在副軸的起點
* center：排列在副軸的中間
* end：排列在副軸的終點
* stretch：伸長container底下的標籤在副軸方向上的長度
### align-items: start
```xml=
```
### align-items: center
```xml=
```
### align-items: end
```xml=
```
### align-items: strech
```xml=
```
## flex的特性 小結
* 預設`flex-direction: row`
* 預設`justify-content: start`
* 預設的flex物件會等高
## Project2
:::info
做一個滿版背景，中間放文字區塊
* 用flex使文字區塊置中
* 做一些簡單的美化看起來讓他好看一點
:::
:::warning
⚠️注意!
如果父層容器沒有任何高度，是無法垂直置中的!
:::
## Project 3 (Optional)
:::info
把先前做過的自我介紹做一些小改造：
* 畫面左邊1/3的部份放自己的個人簡介
* 畫面右邊2/3的部份放剩下的內容
* 使用flex來控制這兩個區塊
:::
:::success
❓為什麼我切出來的版面兩個會一樣高呢
要怎麼做才會讓他們恢復到自身的高度
試著自己上網查相關的資料
:::