現代網頁設計需要考慮多種裝置的顯示模式，在多數情況下，使用 block、inline、inline-block 進行排版已不足以應付複雜的排版需求，因此有了更好用的排版工具「Flexbox 和 Grid」。掌握這兩種排版方式，能更輕鬆實現各種複雜的網頁排版需求。

我會將 Flexbox 分成兩篇文章介紹，分別說明它們的結構與容器相關屬性；隔天再介紹容器內個別項目的屬性。Grid 也會採用相同的方式，分成兩篇文章介紹！

那先來看 Flexbox 吧！ლ(╹◡╹ლ)

**Flexbox 彈性盒子 **

在前面的章節中，我們學到了 block、inline、inline-block 這些顯示方式。然而，使用這些顯示方式作為排版方法時，經常會遇到元件超出容器範圍的問題，往往需要精確計算才能避免元素溢出。如以下範例，.container 寬度為 500px，.item 的總寬度為 600px（100px + 200px + 300px），超過了容器的寬度，因此會發生溢出。

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

.container {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
  padding: 4px;
}

.item {
  border: 1px solid #000;
  height: 100%;
  display: inline-block;
  &.item-1 {
    width: 100px;
  }
  &.item-2 {
    width: 200px;
  }
  &.item-3 {
    width: 300px;
  }
}

Flexbox 正是為了解決這個問題而設計的排版方式，即使元素尺寸超過父元素，也不會輕易溢出容器。

如何使用

使用 Flexbox 排版，只需在父元素上設定 display: flex。這與 block、inline、inline-block 的設定不同，因為 flex 專門用來控制多個項目的排列方式，所以須套用在父容器之上。

.container {
  display: flex;
}

完成設定後，該元素就會變成 Flex 容器，裡面的子元素就會變成 Flex 的項目，排列方式就會按照 Flexbox 的規則進行。

值得注意的是，當外容器設定為 flex 後，即使內元素的總寬度超過外容器寬度，內元素也不會溢出。此時，寬度會依照比例重新分配，而非保持原本的寬度。以下將詳細介紹 flex 的相關設定。

.container {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
  padding: 4px;
  display: flex;
}

.item {
  border: 1px solid #000;
  height: 100%;
  &.item-1 {
    width: 100px;
  }
  &.item-2 {
    width: 200px;
  }
  &.item-3 {
    width: 300px;
  }
}

Flexbox 結構

Flexbox 提供了一種便利的排版系統，能輕鬆控制元素在單一方向（水平或垂直）上的排列、對齊和空間分配。根據 Flex 可以分成以下結構：

• 容器 (Container)：設定 display: flex 的父元素
• 主軸 (Main Axis)：項目排列的主要方向
• 項目 (Item)：容器內的直接子元素
• 交錯軸 (Cross Axis)：垂直於主軸的方向

容器屬性

這些屬性用於調整容器內「所有項目」的排版方式，包括項目的對齊方式、排列方向和間距。這些屬性需設定在有設定 display: flex 的父元素上。

• Flex-direction 主軸方向：flex-direction 屬性定義主軸的方向，決定項目的排列方向。

  .container {
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
  }
  

  

• Flex-wrap 換行控制：flex-wrap 屬性控制當項目超出容器寬度時是否換行。

  .container {
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
  }
  

  

• Justify-content 主軸對齊：justify-content 屬性控制項目在主軸方向上的對齊方式和空間分配。

  .container {
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
  }
  
  

  

• Align-items 交錯軸對齊：align-items 屬性控制項目在交錯軸方向上的對齊方式。

  .container {
    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    align-items: stretch;
    align-items: baseline;
  }
  

  

• Align-content 多行對齊：align-content 屬性控制多行項目在交錯軸上的對齊方式（只在有多行時生效）。

  .container {
    flex-wrap: wrap; /* 必須設定換行 */
  
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-around;
    align-content: space-between;
    align-content: stretch;
  }
  
  

  

• Gap 間距設定：gap 屬性用來設定項目之間的間距，取代過去使用 margin 的方式。

  .container {
    gap: 20px;        /* 所有方向間距 20px */
    gap: 10px 20px;   /* 垂直間距 10px，水平間距 20px */
    row-gap: 10px;    /* 只設定垂直間距 */
    column-gap: 20px; /* 只設定水平間距 */
  }
  

  

未完待續