文章

Flexbox 基礎

發布於 更新於
作者 Ned Hsu 8 分鐘閱讀

Flexbox 基礎

Flexbox（Flexible Box Layout，彈性盒子佈局）是一種一維的 CSS 佈局模型，旨在簡化在一條軸線（水平或垂直）上排列元素的過程。Flexbox 是創建響應式佈局和動態調整元素大小的理想選擇，特別適用於不確定或動態改變的元素數量或大小的佈局情況。

1. Flexbox 的基本概念

Flexbox 佈局主要涉及兩種角色：

  • 彈性容器（Flex Container）：包含彈性項目（Flex Items）的容器。通過將容器的 display 屬性設置為 flex 或 inline-flex 來定義。
  • 彈性項目（Flex Items）：彈性容器內的子元素，這些元素可以在容器內靈活地排列和分佈。

2. Flex 容器屬性

當將元素設置為 display: flex 或 display: inline-flex 時，它成為彈性容器，可以使用以下屬性來控制內部項目的佈局。

  • display: 設置為 flex 或 inline-flex。
    • flex: 將元素定義為彈性容器，呈現為塊級元素。
    • inline-flex: 將元素定義為彈性容器，呈現為行內元素。
  • flex-direction: 定義主軸方向（即彈性項目如何排列）。
    • row: 水平從左到右排列（默認值）。
    • row-reverse: 水平從右到左排列。
    • column: 垂直從上到下排列。
    • column-reverse: 垂直從下到上排列。

    範例:

    1
2
3
4

    .container {
    display: flex;
    flex-direction: row; /* 項目在水平方向排列 */
}

項目 1</div>

項目 2</div>

項目 3</div>

  • justify-content: 定義彈性項目在主軸上的對齊方式。
    • flex-start: 對齊到主軸的起點（默認值）。
    • flex-end: 對齊到主軸的終點。
    • center: 居中對齊。
    • space-between: 項目之間平均分布，首尾沒有間距。
    • space-around: 項目之間的間距相等，每個項目兩側有等量的空白。

    範例:

    1
2
3
4

    .container {
    display: flex;
    justify-content: center; /* 項目在主軸上居中對齊 */
}

項目 1</div>

項目 2</div>

項目 3</div>

  • align-items: 定義彈性項目在交叉軸（垂直於主軸）上的對齊方式。
    • flex-start: 對齊到交叉軸的起點。
    • flex-end: 對齊到交叉軸的終點。
    • center: 在交叉軸上居中對齊。
    • baseline: 根據彈性項目的基線對齊。
    • stretch: 拉伸以填滿容器（默認值）。

    範例:

    1
2
3
4

    .container {
    display: flex;
    align-items: center; /* 項目在交叉軸上居中對齊 */
}

項目 1</div>

項目 2</div>

項目 3</div>

  • align-content: 定義多條彈性行在交叉軸上的對齊方式，當有多行內容時起作用。
    • flex-start: 對齊到交叉軸的起點。
    • flex-end: 對齊到交叉軸的終點。
    • center: 在交叉軸上居中對齊。
    • space-between: 行與行之間平均分布。
    • space-around: 行之間的間距相等，每行兩側有等量的空白。
    • stretch: 拉伸以填滿容器（默認值）。

    範例:

    1
2
3
4
5

    .container {
    display: flex;
    flex-wrap: wrap; /* 允許內容換行 */
    align-content: space-between; /* 行與行之間均勻分佈 */
}

項目 1</div>

項目 2</div>

項目 3</div>

  • flex-wrap: 控制彈性項目是否應該換行。
    • nowrap: 不換行（默認值）。
    • wrap: 換行，從上到下排列。
    • wrap-reverse: 換行，從下到上排列。

    範例:

    1
2
3
4

    .container {
    display: flex;
    flex-wrap: wrap; /* 項目超過容器寬度時換行 */
}

項目 1</div>

項目 2</div>

項目 3</div>

3. Flex 項目屬性

Flexbox 中的彈性項目屬性用於控制每個彈性項目的行為，包括大小、對齊和間距等。

  • flex-grow: 定義彈性項目的增長因子，即當空間可用時，項目應如何增大。
    • 默認值為 0，表示項目不會增長。
    • 若為 1 或更高數字，則項目按比例增長。

    範例:

    1
2
3

    .item {
    flex-grow: 1; /* 項目將平分剩餘空間 */
}
  • flex-shrink: 定義彈性項目的收縮因子，即當空間不足時，項目應如何縮小。
    • 默認值為 1，表示項目會縮小。
    • 若為 0，則項目不會縮小。

    範例:

    1
2
3

    .item {
    flex-shrink: 0; /* 項目在空間不足時不會縮小 */
}
  • flex-basis: 定義彈性項目的基礎大小，即項目分配空間前的初始大小。
    • 可以是長度值（如 20px、50%）或 auto（默認值）。

    範例:

    1
2
3

    .item {
    flex-basis: 200px; /* 項目的初始寬度設為200px */
}
  • flex: 綜合設置 flex-grow、flex-shrink 和 flex-basis 的簡寫屬性。
    • 格式為：flex: [flex-grow] [flex-shrink] [flex-basis]。

    範例:

    1
2
3

    .item {
    flex: 1 0 100px; /* 增長因子為1，不縮小，基礎大小為100px */
}
  • align-self: 覆蓋 align-items 的值，用於單個項目，定義彈性項目在交叉軸上的對齊方式。
    • auto：默認值，繼承 align-items 設置。
    • 其他值：flex-start、flex-end、center、baseline、stretch。

    範例:

    1
2
3

    .item {
    align-self: center; /* 單個項目在交叉軸上居中對齊 */
}

4. 範例應用

以下範例展示了如何使用 Flexbox 創建一個簡單的橫向佈局，包含三個彈性項目，並根據不同情況進行對齊和分佈。

1
2
3
4
5

<div class="flex-container">
  <div class="item">項目 1</div>
  <div class="item">項目 2</div>
  <div class="item">項目 3</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.flex-container {
    display: flex; /* 設定為彈性容器 */
    justify-content: space-between; /* 主軸上均勻分佈 */
    align-items: center; /* 交叉軸上居中對齊 */
    height: 100px;
}

.item {
    flex: 1; /* 每個項目均勻分配空間 */
    padding: 10px;
    background-color: #ddd;
    border: 1px solid #ccc;
}

項目 1</div>

項目 2</div>

項目 3</div>

5. 小結

Flexbox 是一種強大且靈活的佈局模型，適用於簡單到中等複雜度的單軸佈局。通

過熟練掌握 Flexbox 的屬性和使用場景，可以快速創建響應式和動態佈局，改善用戶體驗和設計流程。Flexbox 具有易學易用的特性，是學習現代 CSS 佈局的基礎之一。

Software, CSS
CSS
本文章以 CC BY 4.0 授權