Flexbox 切版技巧
## CSS Flexbox 基本切版技巧
Flexbox 適合用來處理一維版面，例如：
- 水平排列導覽列
- 垂直置中內容
- 按鈕或卡片平均分布
- 建立左右欄位
Flexbox 的設定通常加在「父層容器」上，子元素則會依規則排列。
---
## 1. `display: flex`
```css
.container {
display: flex;
}
```
將元素設定為 Flex 容器後，裡面的「直接子元素」會自動成為 Flex 項目。
預設排列方向為水平方向：
```css
.container {
display: flex;
}
```
HTML：
```html
<div class="container">
<div>區塊 A</div>
<div>區塊 B</div>
<div>區塊 C</div>
</div>
```
結果會由左到右排列。
若希望改成垂直排列，可以搭配：
```css
.container {
display: flex;
flex-direction: column;
}
```
---
## 2. `justify-content`
`justify-content` 控制「主軸」上的排列方式。
當預設為水平排列時，主軸就是水平方向。
常見設定：
```css
.container {
display: flex;
justify-content: flex-start;
}
```
### 常用值
| 設定值 | 說明 |
|---|---|
| `flex-start` | 靠主軸起點排列，預設值 |
| `center` | 置中排列 |
| `flex-end` | 靠主軸終點排列 |
| `space-between` | 第一個靠起點、最後一個靠終點，其餘平均分配 |
| `space-around` | 每個項目左右都有間距 |
| `space-evenly` | 每個項目之間與外側間距完全相等 |
例如：
```css
.container {
display: flex;
justify-content: space-between;
}
```
適合用於讓左右兩個區塊分別貼齊容器兩側。
---
## 3. `align-items`
`align-items` 控制「交叉軸」上的對齊方式。
當預設為水平排列時，交叉軸就是垂直方向。
```css
.container {
display: flex;
align-items: center;
}
```
### 常用值
| 設定值 | 說明 |
|---|---|
| `stretch` | 預設值，子元素會拉伸填滿交叉軸 |
| `flex-start` | 靠交叉軸起點 |
| `center` | 垂直或交叉軸置中 |
| `flex-end` | 靠交叉軸終點 |
| `baseline` | 依文字基線對齊 |
最常見的置中寫法：
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
這樣可以讓子元素同時水平與垂直置中。
---
## 簡單版面案例：導覽列
### HTML
```html
<header class="navbar">
<div class="logo">My Website</div>
<nav class="menu">
<a href="#">首頁</a>
<a href="#">關於我們</a>
<a href="#">聯絡方式</a>
</nav>
</header>
```
### CSS
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
background-color: #333;
color: white;
}
.menu {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 24px;
}
.menu a {
color: white;
text-decoration: none;
}
```
### 效果說明
- `.navbar` 使用 `display: flex`，讓 Logo 與選單水平排列。
- `justify-content: space-between` 讓 Logo 靠左、選單靠右。
- `align-items: center` 讓兩者在垂直方向置中。
- `.menu` 也使用 Flexbox，讓導覽連結水平排列。
- `gap: 24px` 控制連結之間的間距。
---
## 常見置中版面
```html
<div class="card-container">
<div class="card">
內容區塊
</div>
</div>
```
```css
.card-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f2f2f2;
}
.card {
padding: 40px;
background-color: white;
}
```
這會讓 `.card` 在容器內水平與垂直置中。
相關學習地圖、教學課程
F2E 網站前端工程