Flexbox 簡介

CSS3 中引入的 Flexbox（靈活框）佈局提供了一種更有效的方法，可以在容器元素（flex container）中的子元素（flex items）之間佈局，對齊和分配空間。最重要的是，即使它們的尺寸未知或動態，因此稱為彎曲或柔性。

讓我們從基礎開始，看看如何將容器初始化為 flex。

考慮以下標記：

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

只需使用 display: flex 即可初始化 flexbox。完成！

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

現在 Flex 容器已經準備好了，讓我們玩它的 flex 專案，給它們每個寬度 25％，並在它們的父容器內水平居中對齊 flex 專案。

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

請注意，我特意給了 3 個孩子，每個孩子的寬度為 25％，以顯示在彈性箱內移動孩子是多麼容易。

現在，當我們執行上面的程式碼時，我們應該看到容器中的 3 個子項水平地彼此相鄰。這是因為預設情況下，flexbox 具有 flex-direction: row 屬性。預設情況下，彈性專案將彼此水平對齊。右邊應該有一個間隙，因為孩子的總寬度沒有加起來達到 100％。

現在嘗試將屬性 justify-content: center 新增到 flex-container。

.flex-container {
  ...
  justify-content: center;
}

結果是孩子們水平居中對齊。同一屬性還有其他值，例如 flex-end（右對齊），space-around（專案周圍的空間相等），space-between（專案之間的空格相等）。

重要事項：其他塊元素屬性（如 text-align: center 等）對 flex 元素沒有影響。