8.1 屬性 align-items
align-items 和 align-self 屬性允許在交叉軸上對齊 Flex 元素， 提供布局的靈活性和精確性。
align-items 屬性管理 Flex 元素在 Flex 容器內交叉軸（與主軸垂直）上的對齊。 交叉軸取決於屬性 flex-direction 的值：
- 如果
flex-direction是row或row-reverse，交叉軸是垂直的 - 如果
flex-direction是column或column-reverse，交叉軸是水平的
值:
stretch: 元素被拉伸以填滿容器（默認值）flex-start: 元素對齊到容器的開始flex-end: 元素對齊到容器的結束center: 元素在容器中居中對齊baseline: 元素與文字的基線對齊
使用範例:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.align-stretch {
align-items: stretch;
}
.align-flex-start {
align-items: flex-start;
}
HTML
<div class="container align-stretch">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
<div class="container align-flex-start">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
8.2 屬性 align-self
align-self 屬性允許覆蓋特定 Flex 元素的 align-items 值。 這個屬性直接應用於 Flex 元素，管理其在 Flex 容器內的交叉軸對齊。
值:
auto: 值從父元素繼承（默認）stretch: 元素被拉伸以填滿容器flex-start: 元素對齊到容器的開始flex-end: 元素對齊到容器的結束center: 元素在容器中居中對齊baseline: 元素與文字的基線對齊
使用範例:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
align-items: flex-start;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.self-flex-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
HTML
<div class="container">
<div class="item self-flex-end">元素 3</div>
<div class="item self-center">元素 4</div>
<div class="item self-baseline">元素 5</div>
</div>
代碼解釋:
.self-flex-end: 這個元素對齊到容器的底部邊緣.self-center: 這個元素在垂直方向上居中對齊.self-baseline: 這個元素與文字的基線對齊
8.3 元素的居中
使用 Flexbox 可以輕鬆地在垂直和水平方向上居中元素， 使用 justify-content 和 align-items 或 align-self 的組合。
使用範例:
CSS
.center-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 300px;
border: 2px solid #000;
}
.center-item {
background-color: #3498db;
color: white;
padding: 20px;
}
HTML
<div class="center-container">
<div class="center-item">居中元素</div>
</div>
代碼解釋:
-
.center-container: Flex 容器，元素使用justify-content: center;在水平方向上 居中，使用align-items: center;在垂直方向上居中 .center-item: Flex 元素，居中對齊容器內
GO TO FULL VERSION