css align-items与flex布局纵向对齐如何实现-css教程-PHP中文网

css align-items与flex布局纵向对齐如何实现

P粉602998670

发布： 2025-10-13 22:15:02

原创

939人浏览过

答案是：align-items 控制交叉轴对齐，主轴为横向时用 align-items 实现纵向对齐，主轴为纵向时需用 justify-content 实现纵向对齐。

css align-items与flex布局纵向对齐如何实现

在 Flex 布局中，align-items 是控制子元素在交叉轴（cross axis）上对齐方式的关键属性。如果你使用的是纵向主轴（即 flex-direction: column），那么交叉轴就是水平方向；如果是默认的横向主轴（flex-direction: row），交叉轴则是纵向。

align-items 的基本作用

align-items 用于设置 flex 容器内所有子项在交叉轴上的对齐方式。常见取值包括：

flex-start：子项向交叉轴起点对齐
flex-end：子项向交叉轴终点对齐
center：子项在交叉轴居中对齐
stretch：子项拉伸以填满容器（默认值）
baseline：子项按基线对齐

实现纵向对齐的方法

所谓“纵向对齐”，通常是指让子元素在垂直方向上居中、顶部或底部对齐。这取决于你的 flex-direction 设置。

情况一：主轴为横向（默认），想实现纵向对齐

立即学习“前端免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

此时交叉轴是纵向，使用 align-items 即可控制上下对齐。

.container {
  display: flex;
  align-items: center;    /* 垂直居中 */
  /* align-items: flex-start;  顶部对齐 */
  /* align-items: flex-end;    底部对齐 */
}

登录后复制

情况二：主轴为纵向（flex-direction: column），想实现纵向对齐

此时主轴是纵向，纵向对齐应使用 justify-content，而 align-items 控制的是水平方向。

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;    /* 纵向居中 */
  /* justify-content: flex-start;  顶部对齐 */
  /* justify-content: flex-end;    底部对齐 */
}

登录后复制