CSS Flexbox 中 space-around、space-between 和 space-evenly 的差異

更新日期： 2024 年 10 月 28 日

在使用 CSS Flexbox 進行佈局時，我們經常需要調整子項目之間的間距，以達到理想的視覺效果。

justify-content 是 Flexbox 中，用來控制主軸上子項目對齊方式的重要屬性。

其中有三個常用的值，來調整子項目之間的間距：space-around、space-between 和 space-evenly。

這篇文章將為新手介紹這三者的區別，幫助你在佈局時更好地選擇合適的間距設定。

space-between

space-between 將子項目之間的剩餘空間平均分配，並且確保兩端的子項目緊靠容器的邊緣。

這意味著每個子項目之間的間距是相等的，但容器的兩側沒有額外的空間。

視覺效果

• 子項目之間的間距相等。
• 容器的左右兩邊沒有額外的間距，子項目緊貼兩端。

例子

假設有三個子項目，使用 space-between 會使這三個子項目之間的間距相等，並且第一個子項目會緊貼左邊緣，最後一個子項目會緊貼右邊緣。

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

space-around

space-around 將子項目之間的剩餘空間平均分配，但與 space-between 不同的是，這個屬性會在每個子項目的兩側添加相等的空間。

因此子項目之間的間距，會是每個子項目兩側空間的總和，導致容器的左右兩端也會留出一些空間。

這意味著子項目中間的間距，會是容器兩側間距的兩倍，因為每個子項目都會預留相等的空間。

視覺效果

• 子項目之間的間距相等。
• 容器的兩側也有額外的間距，但這些間距是每個子項目兩側間距的一半。

例子

假設有三個子項目，使用 space-around 會使每個子項目兩側，都有相等的空間，這樣會在容器的兩端也留出一部分空間。

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

space-evenly

space-evenly 將子項目之間的剩餘空間，以及容器的左右兩側空間全部平分。

這意味著每個子項目之間的間距，和兩端的間距都是相等的。

這種排列方式，能夠提供更加均勻的間距。

視覺效果

• 子項目之間的間距相等。
• 容器的兩端也有與子項目之間相等的間距，達到整體均勻的分佈效果。

例子

假設有三個子項目，使用 space-evenly 會使每個子項目之間的間距和容器兩側的空間完全相等，讓所有的空間平均分佈。

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

三者的差異對比

• space-between：子項目之間的空間相等，但容器的左右兩端沒有空間，子項目緊貼兩端。
• space-around：子項目之間的空間相等，但子項目兩側的間距會導致容器兩端留有一半的空間。
• space-evenly：子項目之間的空間和容器的兩端空間全部相等，達到整體均勻的排列效果。

以下是這三種屬性的對比圖，幫助你更直觀地理解它們之間的不同：

何時使用這些屬性？

• space-between：適合需要子項目充滿容器，並在各子項目之間留有空間的情況。
  
  特別適合分隔元素但保證兩側對齊的場景，例如導航欄。
• space-around：適合需要子項目之間有均勻的間距，同時在容器兩側也留出一定空間的情況，通常用於創造更加「寬鬆」的佈局。
• space-evenly：適合希望每個子項目，與相鄰子項目和容器邊緣之間，都有相等的間距，能夠提供整體的均衡感。
  
  這在需要視覺對稱，和均勻的佈局時非常有用。

結語

在 CSS Flexbox 中，space-around、space-between 和 space-evenly 這三種對齊方式，提供了靈活的佈局選項，幫助你更好地控制子項目之間的間距。

在選擇這些屬性時，應根據具體的佈局需求來決定，以達到最佳的視覺效果。

希望這篇文章能幫助你，更好地理解這三者的區別，並在實際項目中靈活應用它們！