CSS | align-items 属性

align-items 属性用于设置容器内所有项目在交叉轴上的对齐方式。它的取值与 justify-content 相同，但方向是垂直的。

取值

• stretch（默认值）：如果项目高度没有设置或者设置为 auto，则将占据整个容器的高度。
• center：项目居中对齐。
• flex-start：项目顶部对齐。
• flex-end：项目底部对齐。
• baseline：项目按照基线对齐。

示例

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

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

注意事项

• align-items 只能影响容器内项目的交叉轴对齐方式，无法影响主轴对齐。
• 如果项目定义了自己的交叉轴对齐方式（例如 align-self），则会覆盖容器的 align-items 设置。

以上就是 CSS 中的 align-items 属性介绍。它是 flex 布局中十分重要的属性，可用于快速修改项目的交叉轴对齐方式。