在響應式設計中，Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整，靈活地填充可用空間。因此，無論是在桌面端還是移動端，Flexbox 都能夠確保佈局自適應、整潔且易於維護。

示例：響應式導航欄

假設我們需要創建一個具有可調節寬度的導航欄，項之間應均勻分佈，並且在小屏幕上時，導航項能夠堆疊在一起：

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  background-color: #333;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
  flex-basis: 100px; /* 每個項的基礎大小 */
  text-align: center;
}

@media (max-width: 600px) {
  .navbar {
    justify-content: center;
  }
  .navbar a {
    flex-basis: 100%; /* 在小屏幕上，每個項佔據一整行 */
  }
}

在這個例子中，flex-wrap: wrap 使得導航項可以在屏幕空間不足時自動換行，而 flex-basis: 100% 在小屏幕下使得每個項佔據一行，實現了自適應佈局。

2. 居中對齊

Flexbox 的一個常見用途是將元素在其父容器中垂直和水平居中。傳統的居中方式往往需要多種技巧和 hack，使用 Flexbox 則變得簡單和直接。

示例：居中對齊

<div class="container">
  <div class="box">Centered Content</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;
  background-color: lightgray;
}

.box {
  width: 200px;
  height: 100px;
  background-color: steelblue;
  color: white;
  text-align: center;
  line-height: 100px;
}

通過 justify-content: center 和 align-items: center，子元素 .box 在 .container 中被完全居中。height: 100vh 保證了容器的高度等於視口高度，使得 .box 元素可以在整個頁面中垂直居中。

3. 動態列表佈局

Flexbox 還非常適合處理動態佈局，尤其是當項目數量不固定，或根據內容的變化進行自適應時。

示例：動態網格佈局

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 200px; /* 每個項基礎寬度為200px，且可以增長或收縮 */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

在這個例子中，.grid-container 使用了 flex-wrap: wrap，使得元素可以自動換行。每個 .item 元素的寬度可以根據容器的大小自動調整，並且使用了 gap: 20px 來設定子元素之間的間距。這樣即使容器大小動態變化，項的佈局仍然會自動適應。

常見的 Flexbox 使用技巧

1. 自定義間距

利用 justify-content 和 align-items 組合使用，可以精細地調整項目之間的間距。例如，可以創建有等距間距的元素：

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

這會確保元素之間的間距均等，且容器的起始和結束沒有額外的間距。

2. 元素不均勻分配空間

Flexbox 允許我們為各個項目分配不等的空間。這使得我們能夠設計出自適應的頁面佈局，最大化空間利用。

.container {
  display: flex;
}

.item-1 {
  flex: 2; /* 佔據更多空間 */
}

.item-2 {
  flex: 1; /* 佔據較少空間 */
}

在這個例子中，.item-1 將會佔據比 .item-2 更大的空間，這樣即使容器寬度發生變化，元素之間的比例關係也始終保持不變。

3. 單個元素的定向控制

使用 align-self 可以單獨控制某個子元素在交叉軸上的對齊方式，覆蓋 align-items 的全局設置。

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: center; /* 僅將該元素垂直居中 */
}

4. 使用 order 重排元素順序

Flexbox 提供了 order 屬性，可以靈活地控制子元素的順序，而無需改變 DOM 結構。

.container {
  display: flex;
}

.item-1 {
  order: 2; /* 排在第二個 */
}

.item-2 {
  order: 1; /* 排在第一個 */
}

在這個例子中，儘管 item-1 在 HTML 中排在 item-2 前面，但由於 order 屬性的設置，item-2 會顯示在 item-1 前面。

總結

Flexbox 是 CSS3 中一項強大且靈活的佈局技術，它簡化了元素對齊、分佈和響應式設計的實現。通過理解和運用 Flexbox 中的各種屬性和技巧，開發者能夠更加高效地創建現代化、適應各種屏幕尺寸的 Web 佈局。

從響應式設計到動態佈局，再到精確的元素對齊和排列，Flexbox 提供了比傳統佈局方式更簡潔、靈活且高效的解決方案。掌握 Flexbox 是每個現代前端開發者的必備技能，它使得 Web 開發不僅更加高效，還更具創造性。