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