CSS中的align-items属性详解

描述
align-items是Flexbox布局中的一个重要属性，用于控制交叉轴（垂直于主轴）上所有弹性项目的对齐方式。它设置在弹性容器（display: flex或display: inline-flex的元素）上，对所有直接子项（弹性项目）生效。

核心概念理解

1. 主轴与交叉轴：Flexbox有两条轴。主轴由flex-direction定义（默认水平），交叉轴垂直于主轴
2. 容器与项目：设置display: flex的元素称为弹性容器，其直接子元素称为弹性项目
3. 对齐控制：align-items专门控制项目在交叉轴上的排列方式

属性值详解

1. stretch（默认值）

• 表现：项目被拉伸以填满容器的交叉轴尺寸
• 条件：项目的交叉轴尺寸（height在row布局中，width在column布局中）不能为固定值
• 示例：如果容器高度为200px，项目会拉伸到200px高

2. flex-start

• 表现：项目向交叉轴的起点对齐
• 水平主轴：项目顶部对齐（交叉轴起点在上方）
• 垂直主轴：项目左对齐（交叉轴起点在左侧）

3. flex-end

• 表现：项目向交叉轴的终点对齐
• 水平主轴：项目底部对齐
• 垂直主轴：项目右对齐

4. center

• 表现：项目在交叉轴方向居中对齐
• 效果：项目在容器中间位置，与起点和终点距离相等

5. baseline

• 表现：项目按基线对齐
• 特点：所有项目的文本基线在同一水平线上
• 应用场景：确保不同字体大小的文本排列整齐

实际应用示例

基础布局设置

.container {
  display: flex;
  height: 300px; /* 必须有高度才能看到交叉轴对齐效果 */
  border: 2px solid #333;
  align-items: stretch; /* 默认值 */
}

.item {
  width: 100px;
  margin: 0 10px;
  background: #f0f0f0;
}

不同值的效果对比

/* 顶部对齐 */
.align-start { align-items: flex-start; }

/* 底部对齐 */
.align-end { align-items: flex-end; }

/* 居中对齐 */
.align-center { align-items: center; }

/* 基线对齐 */
.align-baseline { align-items: baseline; }

.big-text { font-size: 24px; }
.small-text { font-size: 14px; }

与flex-direction的关系
当主轴方向改变时，交叉轴也会相应变化：

/* 垂直主轴，交叉轴变为水平 */
.vertical-container {
  flex-direction: column;
  align-items: flex-start; /* 此时控制水平方向左对齐 */
}

注意事项

1. 容器高度：在默认row布局中，容器必须有明确高度才能看到对齐效果
2. 项目尺寸限制：如果项目有固定高度，stretch将失效
3. 单个项目覆盖：可使用align-self属性为单个项目设置不同的对齐方式
4. 响应式设计：可配合媒体查询在不同屏幕尺寸下调整对齐方式

与justify-content的区别

• justify-content：控制主轴方向的对齐
• align-items：控制交叉轴方向的对齐
• 两者配合可实现完美的二维布局控制

通过合理使用align-items，可以轻松实现各种复杂的垂直对齐需求，是Flexbox布局中最常用的属性之一。