CSS Flex 容器
父元素（容器）
正如我們在上一章中指定的那樣，這是一個 flex 容器（藍色區域），其中包含三個 flex 專案
1
2
3
透過將 display 屬性設定為 flex，flex 容器就變得靈活了
flex 容器的屬性是
flex-direction 屬性
flex-direction 屬性定義了容器希望如何堆疊 flex 專案的方向。
1
2
3
示例
column-reverse 值將 flex 專案垂直堆疊（但從下到上）
.flex-container {
display: flex;
flex-direction: column-reverse;
}
示例
row-reverse 值將 flex 專案水平堆疊（但從右到左）
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 屬性
flex-wrap 屬性指定 flex 專案是否應換行。
下面的示例有 12 個 flex 專案，以更好地演示 flex-wrap 屬性。
1
2
3
4
5
6
7
8
9
10
11
12
示例
wrap-reverse 值指定 flex 專案將在必要時換行，並按相反順序排列
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 屬性
flex-flow 屬性是設定 flex-direction 和 flex-wrap 屬性的簡寫屬性。
justify-content 屬性
justify-content 屬性用於對齊 flex 專案
1
2
3
示例
flex-start 值將 flex 專案對齊到容器的開頭（這是預設值）
.flex-container {
display: flex;
justify-content: flex-start;
}
示例
flex-end 值將 flex 專案對齊到容器的末尾
.flex-container {
display: flex;
justify-content: flex-end;
}
示例
space-around 值在行之前、之間和之後顯示帶空格的 flex 專案
.flex-container {
display: flex;
justify-content: space-around;
}
示例
space-between 值在行之間顯示帶空格的 flex 專案
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 屬性
align-items 屬性用於對齊 flex 專案。
1
2
3
在這些示例中，我們使用了一個 200 畫素高的容器，以更好地演示 align-items 屬性。
示例
center 值將 flex 專案對齊到容器的中間
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
示例
flex-start 值將 flex 專案對齊到容器的頂部
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
示例
flex-end 值將 flex 專案對齊到容器的底部
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
示例
stretch 值將 flex 專案拉伸以填充容器（這是預設值）
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
示例
baseline 值對齊 flex 專案，使其基線對齊
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
注意：示例使用不同的字型大小來演示專案是如何根據文字基線對齊的
1
2
3
align-content 屬性
align-content 屬性用於對齊 flex 行。
1
2
3
4
5
6
7
8
9
10
11
12
在這些示例中，我們使用了一個 600 畫素高的容器，並將 flex-wrap 屬性設定為 wrap，以更好地演示 align-content 屬性。
示例
space-between 值在 flex 行之間顯示相等的空間
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
示例
space-around 值在 flex 行之前、之間和之後顯示空間
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
示例
stretch 值將 flex 行拉伸以佔據剩餘空間（這是預設值）
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
示例
center 值將 flex 行顯示在容器的中間
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
示例
flex-start 值將 flex 行顯示在容器的開頭
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
示例
flex-end 值將 flex 行顯示在容器的末尾：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
完美居中
在下面的示例中，我們將解決一個非常常見的樣式問題：完美居中。
解決方案：將 justify-content 和 align-items 屬性都設定為 center，flex 專案將完美居中
示例
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
CSS Flexbox 容器屬性
下表列出了所有 CSS Flexbox 容器屬性
| 屬性 | 描述 |
|---|---|
| align-content | 修改 flex-wrap 屬性的行為。它類似於 align-items，但它對齊 flex 行而不是對齊 flex 專案 |
| align-items | 當專案未在交叉軸上使用所有可用空間時，垂直對齊 flex 專案 |
| display | 指定 HTML 元素的框型別 |
| flex-direction | 指定 flex 容器內彈性專案的方向 |
| flex-flow | flex-direction 和 flex-wrap 的簡寫屬性 |
| flex-wrap | 指定 flex 專案在空間不足時是否應換行，如果它們在一個 flex 行上沒有足夠的空間 |
| justify-content | 當專案未在主軸上使用所有可用空間時，水平對齊 flex 專案 |
