CSS 零基础教程

CSS align-items 属性

align-items 允许你控制弹性项目在弹性容器内沿着交叉轴 (cross axis) 的对齐方式。

在上一章中，我们探讨了处理主轴对齐的 justify-content。现在，我们将把焦点转移到交叉轴上，探索 align-items 的各种值以及它们是如何影响弹性项目定位的。

1. 理解交叉轴 (Cross Axis)

在深入研究 align-items 细节之前，务必先复习一下什么是交叉轴。交叉轴始终与主轴垂直。而主轴的方向则是由 flex-direction 属性决定的。

  • 如果 flex-direction 设置为 row（默认值），主轴是水平的，那么交叉轴就是垂直的。
  • 如果 flex-direction 设置为 column，主轴是垂直的，那么交叉轴就是水平的。

深刻理解交叉轴的概念，是掌握 align-items 工作原理的基础。

2. align-items 的属性值

align-items 属性接受几个不同的值，每个值都指示了弹性项目在交叉轴上的特定对齐行为：

  • stretch (默认值): 弹性项目被拉伸，以填满弹性容器的整个高度（如果 flex-direction 是 column，则填满宽度）。
  • flex-start: 弹性项目对齐到交叉轴的起点。
  • flex-end: 弹性项目对齐到交叉轴的终点。
  • center: 弹性项目在交叉轴上居中对齐。
  • baseline: 弹性项目根据其文本的基线进行对齐。

让我们通过详细的示例来逐一考察这些值。

2.1 stretch (默认行为)

stretch 是 align-items 的默认值。它会使弹性项目拉伸以填满容器的高度。如果弹性容器有固定的高度，项目就会扩展到与该高度匹配。如果容器的高度是由其内容决定的，所有的项目都会拉伸到与最高那个项目相同的高度。

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2<br>包含更多内容<br>比较高</div>
  <div class="item">项目 3</div>
</div>
.container {
  display: flex;
  height: 200px; /* 固定高度 */
  align-items: stretch; /* 这是默认值，即使不写也是这个效果 */
  border: 1px solid black;
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

在这个例子中，即使“项目 2”的内容更多，所有弹性项目都会拉伸填满容器 200px 的高度。如果你删除了容器的 height: 200px;，所有的项目则会拉伸到“项目 2”的自然高度。

2.2 flex-start

flex-start 会将弹性项目对齐到交叉轴的起点。

在基于行的布局中（默认的 flex-direction: row），这意味着项目将对齐到容器的顶部。在基于列的布局中（column），它们将对齐到容器的左侧。

水平主轴 (row) 示例：对齐到顶部

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
</div>
.container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  border: 1px solid black;
}
.item {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

在这种情况下，所有项目都对齐到容器的顶部，底部剩余的空间保持空白。

垂直主轴 (column) 示例：对齐到左侧

.container {
  display: flex;
  flex-direction: column; /* 改为列布局 */
  width: 200px; /* 这里使用宽度而不是高度来观察效果 */
  align-items: flex-start;
  border: 1px solid black;
}
/* .item 样式同上 */

此时，因为交叉轴变成了水平方向，项目会被对齐到容器的左侧。

2.3 flex-end

flex-end 将弹性项目对齐到交叉轴的终点。

在行布局中，这意味着项目会对齐到容器的底部。在列布局中，它们会对齐到容器的右侧。

水平主轴 (row) 示例：对齐到底部

.container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  border: 1px solid black;
}
/* .item 样式同上 */

这里，所有的项目都会沉底，对齐到容器的底部边缘。

垂直主轴 (column) 示例：对齐到右侧

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: flex-end;
  border: 1px solid black;
}
/* .item 样式同上 */

当设置为 column 时，项目会对齐到容器的右侧。

2.4 center

center 值使弹性项目在交叉轴上居中。

在行布局中，这意味着项目将在容器内垂直居中。在列布局中，它们将水平居中。

水平主轴 (row) 示例：垂直居中

.container {
  display: flex;
  height: 200px;
  align-items: center;
  border: 1px solid black;
}
/* .item 样式同上 */

项目将在容器内实现完美的垂直居中对齐。

垂直主轴 (column) 示例：水平居中

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: center;
  border: 1px solid black;
}
/* .item 样式同上 */

在这种配置下，项目在容器内部水平居中。

2.5 baseline

baseline 值根据项目内部文本的基线 (baseline) 进行对齐。当你弹性项目内的文本大小不一时，这非常有用。基线是一条假想的线，大多数字体中的字母都“坐”在这条线上。

<div class="container">
  <div class="item">项目 1</div>
  <div class="item" style="font-size: 2em;">项目 2 (大字)</div>
  <div class="item">项目 3</div>
</div>
.container {
  display: flex;
  height: 200px;
  align-items: baseline;
  border: 1px solid black;
}
.item {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

在这个例子中，“项目 2”的字体更大。使用 baseline 对齐可以确保所有项目中文字的底部基线对齐在同一水平线上，而忽略掉它们各自不同的字体大小和外框高度。

重要提示：baseline 对齐严重依赖于弹性项目内存在的文本。如果项目不包含文本，或者使用了非标准的渲染方式（比如里面是一张图片），baseline 对齐可能无法产生你期望的效果。

3. 演示与实战案例

让我们用几个实用的例子来巩固对 align-items 的理解。

3.1 案例 1：完美垂直居中的登录表单

align-items 最常见的使用场景之一就是垂直居中内容。假设你想在页面正中央放置一个登录表单。

<div class="container">
  <form>
    <label for="username">用户名：</label><br>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">密码：</label><br>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit">登录</button>
  </form>
</div>
.container {
  display: flex;
  justify-content: center; /* 主轴水平居中 */
  align-items: center;     /* 交叉轴垂直居中 */
  height: 100vh;           /* 让容器占据整个视口的高度 */
  background-color: #f0f0f0;
}

form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

在这里，justify-content: center 将表单水平居中，而 align-items: center 将其垂直居中。容器上的 height: 100vh 确保它占满了屏幕高度，从而使得垂直居中能够完美展现。

3.2 案例 2：导航栏内容对齐

在制作导航栏时，你通常希望所有的链接和图标在垂直方向上是对齐的。

<nav class="navbar">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</nav>
.navbar {
  display: flex;
  align-items: center; /* 垂直居中所有项目 */
  background-color: #333;
  color: white;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

通过在 .navbar 上设置 align-items: center，所有导航链接都会在导航栏内部垂直居中，无论它们各自的高度或字体大小如何。