新手指南：了解 CSS 中的 justify-content 和 align-items 差異
更新日期： 2024 年 9 月 14 日
當你使用 CSS Flexbox 進行布局時，justify-content 和 align-items 是兩個非常重要的屬性。
它們都可以幫助你控制，子元素在容器中的排列方式。
但它們的作用方向，和應用場景有所不同。
這篇文章將為你詳細解釋這兩者的區別，幫助你更好地掌握 Flexbox 布局。
justify-content 是什麼？
justify-content 是用來控制子元素在主軸（主方向）上的排列方式。
主軸的方向由 flex-direction 決定，默認情況下是水平方向（從左到右）。
justify-content 的可選值
flex-start
子元素排列在容器的起始位置（預設值）
flex-end
子元素排列在容器的結束位置。
center
子元素排列在容器的正中間。
space-between
子元素之間的間距平均分配，首個元素在起始位置，最後一個元素在結束位置。
space-around
子元素之間和兩端都有相同的間距，間距分配得較為平均。
space-evenly
子元素之間的間距均等分配，兩端和中間的間距相等。
例子
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
justify-content: center;
}在這個例子中，所有 .item 元素會在容器 .container 的水平方向（主軸）居中排列。
align-items 是什麼？
align-items 是用來控制子元素在交叉軸（次方向）上的排列方式。交叉軸的方向與主軸垂直，默認情況下是垂直方向（從上到下）。
align-items 的可選值
flex-start
子元素在交叉軸的起始位置對齊（通常是上方）
flex-end
子元素在交叉軸的結束位置對齊（通常是下方）
center
子元素在交叉軸的正中間對齊
baseline
子元素的基線對齊，通常用於文字
stretch
子元素將被拉伸以填滿容器（默認值），前提是子元素未設置固定高度。
例子
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
align-items: center;
}在這個例子中，所有 .item 元素會在容器 .container 的垂直方向（交叉軸）居中排列。
justify-content 和 align-items 的差異
總結來說：
- justify-content 控制的是主軸方向上子元素的排列方式，通常是水平方向（但也可以通過 flex-direction 改變）。
- align-items 控制的是交叉軸方向上子元素的排列方式，通常是垂直方向。
組合使用
通常，你會同時使用這兩個屬性來達到理想的布局效果。例如：
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}這段代碼會讓 .item 元素在 .container 中的水平方向和垂直方向上都居中對齊，從而達到元素完全居中的效果。
結語
理解 justify-content 和 align-items 之間的差異，是掌握 CSS Flexbox 布局的重要一步。
justify-content 處理主軸方向上的排列，align-items 處理交叉軸方向上的排列。
透過這兩個屬性，你可以輕鬆地控制元素的對齊方式，打造出精美的響應式布局。
希望這篇文章能幫助你更好地理解和使用這兩個重要的 CSS 屬性！