CSS Flexbox 入門指南

更新日期： 2024 年 11 月 4 日

CSS Flexbox（彈性盒布局）是一個非常強大的工具，能夠幫助你快速而靈活地創建不同的佈局。

相較於傳統的佈局方法，Flexbox 更加直觀並且適應性強，特別適合用來設計自適應、彈性的網頁佈局。

本篇文章將帶你認識 Flexbox 的基本概念和用法，幫助新手更好地掌握這個重要的工具。

Flexbox 是什麼？

Flexbox，正式名稱是 Flexible Box Layout Module，它提供了一種簡單的方式來排列元素，使它們能夠在容器中有效地分佈空間。

使用 Flexbox，你可以輕鬆地對齊、排序並調整子元素的大小，無論是橫向還是縱向排列。

Flexbox 的主要特點，是能夠讓容器內的元素，根據可用空間自動調整大小和間距。

這對於創建彈性、自適應的佈局特別有幫助。

基本概念

在 Flexbox 中，有兩個主要的角色：

• 父容器（Flex Container）：啟用了 Flexbox 的容器。
• 子項目（Flex Items）：放在父容器中的每個直接子元素。

只需要在父容器上設置 display: flex;，子項目就會變成「彈性項目」，可以利用 Flexbox 的屬性來控制它們的排列方式和尺寸。

Flex Container 的屬性

以下是一些常見的 Flex Container 屬性：

控制主軸

1. flex-direction： 決定了子項目排列的方向。
   • row：子項目從左到右排列（默認值）。
   • row-reverse：子項目從右到左排列。
   • column：子項目從上到下排列。
   • column-reverse：子項目從下到上排列。

2. flex-wrap： 決定了當子項目在主軸方向上空間不足時是否換行。
   • nowrap：所有子項目會放在同一行，不會換行（默認值）。
   • wrap：當空間不足時，子項目會自動換行。
   • wrap-reverse：當空間不足時，子項目會反方向換行。

3. justify-content： 控制主軸方向上（水平或垂直）的子項目對齊方式。
   • flex-start：子項目靠主軸起點對齊（默認值）。
   • flex-end：子項目靠主軸終點對齊。
   • center：子項目居中對齊。
   • space-between：子項目之間平分剩餘空間。
   • space-around：子項目之間的間距相等，每個子項目兩側都有相等的間距。
   • space-evenly：子項目之間的間距相等，並且兩端與子項目之間的距離也相等。

控制交叉軸

1. align-items：控制交叉軸方向上（與主軸垂直）的子項目對齊方式。
   • flex-start：子項目靠交叉軸起點對齊。
   • flex-end：子項目靠交叉軸終點對齊。
   • center：子項目在交叉軸上居中。
   • stretch：子項目拉伸以填滿容器（默認值）。

2. align-content：控制多行內容在交叉軸方向上的對齊方式，當有多行子項目時，此屬性特別有用。
   • flex-start：各行靠交叉軸起點對齊。
   • flex-end：各行靠交叉軸終點對齊。
   • center：各行在交叉軸上居中。
   • space-between：各行之間平分剩餘空間。
   • space-around：各行之間的間距相等。
   • space-evenly：各行之間的間距相等，並且各行的兩端與行之間的距離也相等。
   • stretch：各行將被拉伸以填滿交叉軸的剩餘空間。

Flex Item 的屬性

子項目（Flex Items）也有一些常用的屬性來控制它們在 Flex 容器中的表現：

1. flex：是一個縮寫屬性，包含了 flex-grow、flex-shrink 和 flex-basis 三個屬性。
   
   最常用的設定方式是 flex: 1;，這意味著子項目將均分父容器中的可用空間。
2. order：決定了子項目的排列順序。
   
   默認情況下，所有子項目的 order 值為 0，你可以通過更改這個值來改變它們的順序，數字越小，位置越靠前。
3. align-self 可以覆蓋單個子項目的 align-items 設定，讓每個子項目在交叉軸上有不同的對齊方式。

Flexbox 的基本範例

讓我們來看看一個簡單的範例，了解如何使用 Flexbox 來創建彈性佈局。

HTML

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

CSS

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  font-size: 1.5em;
}

在這個例子中，我們設置了 .container 的 display: flex;，這樣它的子元素 .item 就會成為彈性項目。
我們使用了 justify-content: space-around; 來讓子項目之間平均分佈剩餘空間，並且使用 align-items: center; 來讓它們在垂直方向上居中對齊。

Flexbox 的優勢

1. 簡單直觀：Flexbox 的語法和概念比傳統的浮動佈局更加簡單易懂。只需要幾行代碼，就可以讓元素按照你想要的方式排列。
2. 自適應能力強：Flexbox 的設計理念就是要讓元素能夠在不同尺寸的螢幕上自適應調整大小。它能夠輕鬆解決許多傳統佈局中遇到的對齊和間距問題。
3. 靈活的對齊方式：Flexbox 提供了強大的對齊和分佈選項，無論是水平對齊還是垂直對齊，都可以使用簡單的屬性來完成。

Flexbox 的限制

雖然 Flexbox 非常強大，但它並不適合所有的佈局。

例如，如果你需要處理複雜的多行、多列的佈局，CSS Grid 可能會更適合。

Flexbox 更適合於一維的佈局（即單行或單列），而 Grid 則是專為二維佈局設計的。

新手常見的錯誤與注意事項

Flexbox 提供了強大的佈局功能，但新手在使用時，常常會因為忘記各種屬性的預設值，而導致排版異常。

這些屬性（例如 flex-direction 默認為 row、flex-wrap 默認為 nowrap 等），在不同的場景下可能會產生不符合預期的佈局效果。

因此，在使用 Flexbox 時，務必要謹記各項屬性的預設值，這樣才能更好地控制佈局，避免因預設值導致的問題。

結語

Flexbox 是 CSS 中非常強大且實用的佈局工具，特別適合用於創建彈性、自適應的頁面佈局。

它能夠輕鬆解決許多傳統佈局中的難題，例如水平和垂直對齊問題。

如果你是 CSS 的新手，掌握 Flexbox 將會極大地提高你的佈局能力和效率。

希望這篇文章能幫助你，理解 Flexbox 的基本概念和使用方法。

歡迎你在自己的項目中嘗試這些技巧，並逐步熟悉它帶來的靈活性和便利！