文章

Flexbox 進階

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

Flexbox 進階

在了解 Flexbox 的基礎概念後，可以進一步探索一些進階技巧和應用場景，來更靈活地控制佈局。在這一部分，我們將介紹 Flexbox 的進階屬性、常見佈局模式和實踐技巧。

1. Flexbox 進階屬性

除了前面提到的基本屬性外，還有一些進階的 Flexbox 屬性可幫助處理更複雜的佈局需求。

  • order: 控制彈性項目的排列順序。
    • 默認值為 0。值越小的項目越靠前顯示，值越大的項目越靠後顯示。
    • 可以使用正數或負數來調整排列順序。

    範例：

    1
2
3
4
5
6

    .item-1 {
    order: 1; /* 項目 1 排列順序設為 1 */
}
.item-2 {
    order: -1; /* 項目 2 排列順序設為 -1，會排在最前面 */
}
  • flex-flow: 是 flex-direction 和 flex-wrap 的簡寫形式，用於同時設置彈性容器的主軸方向和是否換行。
    • 語法：flex-flow: <flex-direction> <flex-wrap>;
    • 範例：
      1
2
3
4

      .container {
    display: flex;
    flex-flow: row wrap; /* 項目沿水平方向排列，並允許換行 */
}
  • gap（或 row-gap 和 column-gap）: 定義彈性項目之間的間距。
    • gap: 設置主軸和交叉軸方向上的間距。
    • row-gap 和 column-gap: 分別設置行和列之間的間距。
    • 範例：
      1
2
3
4

      .container {
    display: flex;
    gap: 20px; /* 項目之間有 20px 的間距 */
}

2. 常見佈局模式

Flexbox 可以幫助輕鬆實現一些常見的佈局模式，如水平居中、垂直居中、卡片佈局等。

水平和垂直居中

使用 Flexbox，可以輕鬆地實現元素在容器中的水平和垂直居中。

  • 範例：
    1
2
3

    <div class="center-container">
  <div class="center-item">居中項目</div>
</div>

    1
2
3
4
5
6
7

    .center-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 200px;
    border: 1px solid #ddd;
}

多欄佈局

Flexbox 也非常適合多欄佈局，可以控制每一欄的寬度、順序和對齊方式。

  • 範例：
    1
2
3
4
5

    <div class="columns">
  <div class="column">欄 1</div>
  <div class="column">欄 2</div>
  <div class="column">欄 3</div>
</div>

    1
2
3
4
5
6
7
8
9
10
11

    .columns {
    display: flex;
    justify-content: space-between; /* 在主軸上均勻分佈 */
}

.column {
    flex: 1; /* 每個欄位占相等的寬度 */
    margin: 10px;
    padding: 20px;
    background-color: #f0f0f0;
}

卡片佈局

Flexbox 可以用來創建響應式的卡片佈局，並在不同的屏幕尺寸下動態調整。

  • 範例：
    1
2
3
4
5

    <div class="card-container">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
</div>

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

    .card-container {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    gap: 15px; /* 卡片之間的間距 */
}

.card {
    flex: 1 1 200px; /* 每個卡片至少有200px寬度，能夠伸縮 */
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

3. Flexbox 實踐技巧

  • 避免使用過多的 flex 屬性：在同一個彈性容器內過度使用 flex-grow、flex-shrink 和 flex-basis 可能導致不可預測的佈局結果。建議優先簡化設計，僅在需要的地方使用這些屬性。

  • 善用 gap 屬性：gap 屬性（或 row-gap 和 column-gap）提供了設置項目之間間距的簡潔方法，無需使用額外的邊距（margin）來達成相同效果。這對於維護和調整佈局非常方便。

  • 混合使用 Flexbox 和 Grid：Flexbox 和 CSS Grid 可以混合使用以實現更複雜的佈局。Flexbox 非常適合一維佈局（如彈性導航欄），而 Grid 更適合二維佈局（如整體頁面布局）。

  • 處理高度塌陷：如果容器內的所有元素都設置了 float 或 position: absolute，Flexbox 可能導致容器高度塌陷。使用 align-items: stretch 或設置容器的明確高度可以解決這個問題。

4. Flexbox 與響應式設計

Flexbox 特別適合響應式設計，因為它能夠根據不同的屏幕尺寸動態調整佈局。在實踐中，可以使用媒體查詢結合 Flexbox 來創建自適應的佈局。

  • 範例：響應式導航欄
    1
2
3
4
5
6

    <nav class="navbar">
  <div class="nav-item">首頁</div>
  <div class="nav-item">關於</div>
  <div class="nav-item">服務</div>
  <div class="nav-item">聯繫</div>
</nav>

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    .navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nav-item {
    flex: 1;
    text-align: center;
    padding: 10px;
}

@media (max-width: 600px) {
    .navbar {
        flex-direction: column; /* 小屏幕下切換到垂直佈局 */
        align-items: center;
    }
}

5. 小結

Flexbox 是一種功能強大的工具，可以幫助您創建靈活且響應式的佈局。通過學習和應用進階屬性，如 order、gap 和 flex-flow，以及實踐常見佈局模式和技巧，您可以更有效地構建現代化的網頁設計。此外，Flexbox 可以與其他 CSS 佈局技術（如 Grid）結合使用，以實現更為複雜的佈局設計。了解和掌握這些進階技術將幫助您在日常開發中更靈活地應對不同的佈局需求。

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