介绍
在本实验中，你将探索 Flexbox 中的 align-items 属性，这是一种强大的 CSS 布局技术，用于控制容器内 flex 项目的垂直对齐方式。通过一系列动手练习，你将学习如何使用不同的对齐值（如 stretch、flex-start、flex-end、center 和 baseline）来操作 flex 项目。
实验将引导你创建 HTML 结构，应用各种对齐策略，并理解 align-items 属性如何影响 flex 容器的布局。通过实践示例，你将深入了解如何有效地控制响应式网页设计中元素的定位和大小。
理解 Align-Items 属性的基础知识
在这一步中，你将学习 Flexbox 中 align-items 属性的基本概念，这对于控制 flex 容器内 flex 项目的垂直对齐至关重要。
align-items 属性定义了 flex 项目如何沿交叉轴（在行布局中为垂直方向，在列布局中为水平方向）对齐。默认情况下，flex 项目会被拉伸以填充容器的交叉轴。
让我们创建一个简单的 HTML 和 CSS 示例来演示 align-items 的基本用法：
<!doctype html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
border: 2px solid blue;
}
.flex-item {
width: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
在这个示例中，我们创建了一个包含三个 flex 项目的 flex 容器。默认情况下，align-items 属性设置为 stretch，这意味着项目将拉伸以填充容器的高度。
align-items 的主要取值包括：
stretch（默认）：项目拉伸以填充容器flex-start：项目对齐到交叉轴的起点flex-end：项目对齐到交叉轴的终点center：项目沿交叉轴居中baseline：项目基于其文本基线对齐
默认 stretch 对齐的示例输出：
[Item 1][Item 2][Item 3]
------ ------ ------
(full (full (full
height) height) height)
打开 WebIDE，在 ~/project 目录中创建一个名为 flexbox-align.html 的新文件。将上面的 HTML 代码复制到此文件中并保存。然后你可以在网页浏览器中打开该文件，查看默认对齐的效果。
创建 Flexbox 布局的 HTML 结构
在这一步中，你将学习如何创建一个基本的 HTML 结构来设置 Flexbox 布局。我们将基于前一步的内容，创建一个包含多个 flex 项目的结构化 HTML 文档。
打开 WebIDE，在 ~/project 目录中创建一个名为 flexbox-layout.html 的新文件。使用以下 HTML 结构来演示一个典型的 Flexbox 布局：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Layout Example</title>
<style>
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
</div>
</body>
</html>
让我们分解这个 Flexbox 布局的关键组成部分：
.flex-container设置了display: flex，启用了 Flexbox 布局- 我们添加了 5 个具有一致样式的 flex 项目
- 容器具有浅灰色背景和内边距
- 每个项目具有固定的宽度和高度，背景为绿色
示例输出将如下所示：
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
Green Green Green Green Green
boxes boxes boxes boxes boxes
保存文件并在网页浏览器中打开它，查看 Flexbox 布局的实际效果。注意项目如何自动以相等的间距水平分布。
为 Flex 项目应用 Stretch 对齐方式
在这一步中，你将探索 Flexbox 中默认的 stretch 对齐方式，并了解它如何沿交叉轴自动调整 flex 项目的大小。
打开你在上一步中创建的 flexbox-layout.html 文件。我们将修改 CSS 以更清晰地演示拉伸对齐：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stretch Alignment in Flexbox</title>
<style>
.flex-container {
display: flex;
height: 300px; /* 固定容器高度 */
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
/* 未设置显式高度 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
</div>
</body>
</html>
关于拉伸对齐的关键点：
- 默认情况下，
align-items: stretch会应用于 flex 容器 - Flex 项目会自动拉伸以填充容器的高度
- 当项目未设置显式高度时会发生这种情况
- 拉伸沿交叉轴发生（在行布局中为垂直方向）
示例输出可视化：
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
Stretched Stretched Stretched Stretched Stretched
to full to full to full to full to full
height height height height height
注意，即使未指定单个项目的高度，项目也会自动扩展以填充 flex 容器的 300px 高度。这是 Flexbox 默认的 stretch 行为。
保存文件并在网页浏览器中打开它，查看拉伸对齐的实际效果。每个项目都将填充容器的高度，形成统一的拉伸外观。
尝试不同的 Align-Items 属性值
在这一步中，你将探索不同的 align-items 值，并了解它们如何影响容器内 flex 项目的垂直对齐。
打开 flexbox-layout.html 文件并更新 CSS 以演示各种 align-items 值：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Align-Items Experiment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Different align-items classes */
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
</style>
</head>
<body>
<div class="flex-container stretch">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-start">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-end">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container center">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container baseline">
<div class="flex-item" style="font-size: 16px;">Item 1</div>
<div class="flex-item" style="font-size: 24px;">Item 2</div>
<div class="flex-item" style="font-size: 32px;">Item 3</div>
</div>
</body>
</html>
关键 align-items 值解释：
stretch（默认）：项目拉伸以填充容器高度flex-start：项目对齐到容器顶部flex-end：项目对齐到容器底部center：项目垂直居中baseline：项目基于其文本基线对齐
示例输出可视化：
Stretch: [Item 1][Item 2][Item 3] (全高)
Flex-Start: [Item 1][Item 2][Item 3] (顶部对齐)
Flex-End: [Item 1][Item 2][Item 3] (底部对齐)
Center: [Item 1][Item 2][Item 3] (垂直居中)
Baseline: [Item 1][Item 2][Item 3] (文本基线对齐)
保存文件并在网页浏览器中打开它，查看不同的对齐样式。注意每个容器如何展示 flex 项目的独特垂直对齐方式。
自定义 Flex 容器对齐方式
在这一步中，你将学习如何通过结合不同的对齐技术并添加单个项目的自定义设置，来创建更复杂的 Flexbox 布局。
打开 flexbox-layout.html 文件，并使用以下高级示例更新它：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Flexbox Alignment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Custom alignment scenarios */
.mixed-alignment {
align-items: center;
}
.mixed-alignment .special-item {
align-self: flex-end;
}
.mixed-alignment .tall-item {
align-self: stretch;
height: auto;
}
</style>
</head>
<body>
<div class="flex-container mixed-alignment">
<div class="flex-item">Normal</div>
<div class="flex-item special-item">Special</div>
<div class="flex-item tall-item">Tall Item</div>
</div>
</body>
</html>
关键自定义技术：
align-items: center设置默认的垂直居中对齐align-self: flex-end为特定项目覆盖容器对齐方式align-self: stretch允许单个项目以不同方式拉伸
示例输出可视化：
[Normal Item] [Special Item] [Tall Item]
↑ ↓ ↑
居中 底部对齐 拉伸
该示例展示了如何：
- 为所有项目设置默认对齐方式
- 为特定项目覆盖对齐方式
- 创建更动态和灵活的布局
保存文件并在网页浏览器中打开它，查看自定义对齐方式的实际效果。
总结
在本实验中，参与者探索了 Flexbox 中的 align-items 属性，学习了如何控制容器内 flex 项目的垂直对齐。实验全面介绍了不同的对齐策略，从默认的 stretch 行为开始，并演示了如何使用 flex-start、flex-end、center 和 baseline 等值来定位 flex 项目。
通过动手实践的 HTML 和 CSS 示例，学习者获得了操作 flex 容器布局的实际经验，理解了 align-items 属性如何影响元素沿交叉轴的定位。实验强调了该属性在创建响应式和视觉平衡的网页设计中的重要性，使参与者能够开发更复杂和灵活的布局技术。
