CSS FlexBox 彈性盒子 | 梧所不學

網頁排版是前端開發中最令人頭痛的問題之一，以前我們會使用浮動（float）或定位（position）來排列元素，但這些方法往往需要繁瑣的調整。而本文介紹的 FlexBox（彈性盒子）則提供了一個更直覺、更高效的排版解決方法，讓複雜的網頁排版變得簡單許多。

FlexBox 是什麼？

FlexBox 是一種一維佈局模型，讓我們能夠輕鬆地在單一方向（行或列）上排列元素。FlexBox 有兩個重要的基本概念：

1. 父容器（Flex 容器）：設定 display: flex 的元素
2. 子元素（Flex 項目）：Flex 容器內的直接子元素

FlexBox 的軸線

FlexBox 使用兩條軸線來決定元素的排列方式：

1. 主軸（Main Axis）：決定元素的主要排列方向，預設是水平從左到右

2. 交錯軸（Cross Axis）：垂直於主軸的方向，預設是垂直從上到下

FlexBox 容器屬性  

flex-direction

flex-direction 決定了子元素的主軸排列方向：

• row（預設）：子元素沿著水平方向從左到右排列。  
• row-reverse：子元素沿著水平方向從右到左排列。
• column：子元素沿著垂直方向從上到下排列。
• column-reverse：子元素沿著垂直方向從下到上排列。

.container {
  display: flex;
  flex-direction: row; /* 水平排列（預設） */
}

justify-content

當 Flex 容器內的元素沒有填滿整個空間時，可以使用 justify-content 控制子元素在主軸上的對齊位置：

• flex-start（預設）：子元素靠主軸起點對齊。  
• flex-end：子元素靠主軸終點對齊。  
• center：子元素置中對齊。  
• space-between：首尾對齊容器邊緣，子元素間距相等。  
• space-around：每子個元素兩側留有相等空間。  

.container {
  display: flex;
  justify-content: center; /* 元素在主軸上置中 */
}

align-items

align-items 是用來控制子元素在交錯軸上的對齊位置:

• stretch（預設）：讓子元素拉伸填滿容器高度。  
• flex-start：子元素靠交錯軸起點。  
• flex-end：子元素靠交錯軸終點對齊。  
• center：子元素沿交錯軸置中對齊。  

.container {
  display: flex;
  align-items: center; /* 元素在交錯軸上置中 */
}

flex-wrap

 flex-wrap 用來控制子元素是否換行:

• nowrap（預設）：不換行，可能會擠壓子元素
• wrap：子元素會根據空間自動換行。
• wrap-reverse：換行但順序反轉。

.container {
  display: flex;
  flex-wrap: wrap; /* 元素會自動換行 */
}

align-content

當有多行 Flex 項目時（啟用 flex-wrap: wrap），控制各行在交錯軸上的對齊方式：

• stretch（預設）：各行平均拉伸填滿容器。
• flex-start：各行靠交錯軸起點對齊。  
• flex-end：各行靠交錯軸終點對齊。  
• center：各行置中對齊。  
• space-between：各行首尾對齊，行與行間平均分布間距。  
• space-around：各行兩側留有相等間距。  

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 多行均勻分布 */
}

gap

gap 可以設定 Flex 子元素之間的間距，不影響與容器邊緣的距離：

.container {
  display: flex;
  gap: 10px; /* 所有子元素間距為10px */
  /* 也可以分別設定行列間距: gap: 10px 20px; */
}

FlexBox 子元素屬性

flex-grow

flex-grow 可以決定子元素如何分配剩餘空間：  

• 0（預設）：元素不會擴展。
• 1 以上：數值越大，元素佔據的比例越多。

.item {
  flex-grow: 1; /* 平均分配剩餘空間 */
}

.important-item {
  flex-grow: 2; /* 分配到兩倍的剩餘空間 */
}

flex-shrink

當容器空間不足時，flex-shrink 會決定元素的縮小程度:  

• 1（預設）：子元素根據容器大小縮小。
• 0：子元素不會縮小。
• 2 以上：子元素縮小的程度更大。

.item {
  flex-shrink: 0; /* 空間不足時不縮小 */
}

flex-basis

flex-basis 用來設定子元素在主軸上的初始大小，可接受 px、% 或 auto 等單位:  

.item {
  flex-basis: 200px; /* 初始寬度/高度為200px */
}

align-self

可以使用 align-self 覆蓋 align-items 的設定，為單一元素設置不同的對齊方式：

• auto（預設）：繼承 align-items 設定。  
• flex-start：靠交錯軸起點對齊。  
• flex-end：靠交錯軸終點對齊。  
• center：置中對齊。  
• stretch：讓元素填滿交錯軸空間。

.special-item {
  align-self: flex-end; /* 只有這個元素靠底對齊 */
}

結語  

FlexBox 是一個功能強大的佈局工具，能讓開發者能夠輕鬆控制元素的排列方式，讓排版變得更加直覺和靈活。