7.1 屬性 justify-content
Flexbox 提供了優秀的工具來管理元素在 Flex 容器內的對齊和空間分配。其中一個關鍵屬性就是 justify-content， 它負責管理 Flex 元素沿著主軸的對齊方式。
屬性 justify-content 定義了 Flex 元素將如何沿著 Flex 容器的主軸分配。 主軸取決於屬性 flex-direction: 的值。
- 如果
flex-direction的值是row或row-reverse，主軸將是水平的 - 如果
flex-direction的值是column或column-reverse，主軸將是垂直的
值：
flex-start: 元素向容器的開始位置對齊（默認值）flex-end: 元素向容器的結束位置對齊center: 元素向容器的中心對齊space-between: 元素平均分配，中間有相等的空隙space-around: 元素平均分配，兩邊和中間都有空隙space-evenly: 元素平等分配，兩邊和中間的空隙都一樣
使用範例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
HTML
<div class="container flex-start">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
7.2 justify-content 的值
1. flex-start
當 flex-start 值時，元素對齊在 Flex 容器的開始位置，也就是說，如果主軸是水平的 (row)，就在左側， 或者如果主軸是垂直的 (column)，就在上側。
使用範例：
CSS
.container {
display: flex;
justify-content: flex-start;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
2. flex-end
當 flex-end 值時，元素對齊在 Flex 容器的結束位置，也就是說，如果主軸是水平的 (row)，就在右側， 或者如果主軸是垂直的 (column)，就在下側。
使用範例：
CSS
.container {
display: flex;
justify-content: flex-end;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
3. center
當 center 值時，元素對齊在 Flex 容器的中心。這個值對創建居中佈局很有用。
使用範例：
CSS
.container {
display: flex;
justify-content: center;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
4. space-between
當 space-between 值時，元素均勻地分配在主軸上，之間有相等的空隙。 第一個元素對齊在容器的開始位置，而最後一個元素對齊在容器的結束位置。
使用範例：
CSS
.container {
display: flex;
justify-content: space-between;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
5. space-around
當 space-around 值時，元素均勻地分佈，邊緣和之間都有間隔。 元素之間的間隔將是容器邊緣間隔的兩倍。
使用範例：
CSS
.container {
display: flex;
justify-content: space-around;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
6. space-evenly
當 space-evenly 值時，元素平等地分佈，中間和容器兩邊都有相同的間隔。 這個值確保了整個容器內的間隔都一致。
使用範例：
CSS
.container {
display: flex;
justify-content: space-evenly;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
7.3 導航菜單居中
在實際項目中的使用範例 — 導航菜單的居中：
CSS
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
HTML
<nav class="nav">
<a href="#" class="nav-item">首頁</a>
<a href="#" class="nav-item">關於我們</a>
<a href="#" class="nav-item">服務</a>
<a href="#" class="nav-item">聯繫我們</a>
</nav>
代碼說明：
.nav: 用於導航菜單的 Flex 容器，元素居中對齊.nav-item: Flex 元素（鏈接）的基本樣式
GO TO FULL VERSION