CSS Flex 專案
子元素（專案）
Flex 容器的直接子元素會自動成為靈活（flex）的專案。
1
2
3
4
上面的元素表示一個灰色 Flex 容器中的四個藍色 Flex 專案。
Flex 專案屬性包括：
order 屬性
order 屬性指定 Flex 專案的順序。
1
2
3
4
程式碼中的第一個 Flex 專案不必作為佈局中的第一個專案出現。
order 值必須是數字，預設值為 0。
示例
order 屬性可以改變 Flex 專案的順序
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-grow 屬性
flex-grow 屬性指定 Flex 專案相對於其他 Flex 專案的增長量。
1
2
3
值必須是數字，預設值為 0。
示例
讓第三個 Flex 專案比其他 Flex 專案快八倍的增長
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
flex-shrink 屬性
flex-shrink 屬性指定 Flex 專案相對於其他 Flex 專案的收縮量。
1
2
3
4
5
6
7
8
9
10
值必須是數字，預設值為 1。
示例
不要讓第三個 Flex 專案像其他 Flex 專案一樣收縮
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
flex-basis 屬性
flex-basis 屬性指定 Flex 專案的初始長度。
1
2
3
4
示例
將第三個 Flex 專案的初始長度設定為 200 畫素
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
flex 屬性
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
示例
使第三個 Flex 專案不可增長 (0)，不可收縮 (0)，且初始長度為 200 畫素
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
align-self 屬性
align-self 屬性指定 Flex 專案在 Flex 容器內的對齊方式。
align-self 屬性會覆蓋容器的 align-items 屬性設定的預設對齊方式。
1
2
3
4
在這些示例中，我們使用了一個 200 畫素高的容器，以更好地演示 align-self 屬性
示例
將第三個 Flex 專案在容器中間對齊
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
示例
將第二個 Flex 專案在容器頂部對齊，第三個 Flex 專案在容器底部對齊
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
CSS Flexbox 專案屬性
下表列出了所有 CSS Flexbox 專案屬性
| 屬性 | 描述 |
|---|---|
| align-self | 為 Flex 專案指定對齊方式（覆蓋 Flex 容器的 align-items 屬性） |
| flex | flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性 |
| flex-basis | 指定 Flex 專案的初始長度 |
| flex-grow | 指定 Flex 專案在同一容器內相對於其他 Flex 專案的增長量 |
| flex-shrink | 指定 Flex 專案在同一容器內相對於其他 Flex 專案的收縮量 |
| order | 指定同一容器內 Flex 專案的順序 |
