导航分类

CSS align-content 属性 CSS align-self 属性

CSS align-items 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

align-items是 CSS 中用于控制 flex 容器内项目在交叉轴（垂直于主轴）上对齐方式的属性。基本概念：

主轴（main axis）：由 flex-direction 决定的方向（默认为水平方向）
交叉轴（cross axis）：与主轴垂直的方向（默认为垂直方向）
对齐方式：决定 flex 项目如何在交叉轴上排列

常用的实例

接下来用多种实例演示align-items属性的用法，来深化您对align-items属性的理解。

1. 默认拉伸 (stretch)

实例代码运行代码

复制

.container {
    display: flex;
    align-items: stretch; /* 默认值，可省略 */
}

2. 顶部对齐 (flex-start)

实例代码运行代码

复制

.container {
    display: flex;
    align-items: flex-start;
}

3. 底部对齐 (flex-end)

实例代码运行代码

复制

.container {
    display: flex;
    align-items: flex-end;
}

4. 居中对齐 (center)

实例代码运行代码

复制

.container {
    display: flex;
    align-items: center;
}

5. 基线对齐 (baseline)

实例代码运行代码

复制

.container {
    display: flex;
    align-items: baseline;
}

CSS 语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值

值	描述
`stretch`	项目被拉伸以适合容器（默认值）
`center`	项目位于容器的中央。
`flex-start`	项目位于容器的开头。
`flex-end`	项目位于容器的末端。
`baseline`	项目被定位到容器的基线。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。

浏览器支持

表格中的数字注明了完全支持align-items属性的首个浏览器版本。


57.0	16.0	52.0	10.1	44.0

CSS align-content 属性 CSS align-self 属性

评论区 0

发表评论

教程介绍

CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。

32 章节

22 阅读

0 评论

CSS align-items 属性

定义和用法

常用的实例

1. 默认拉伸 (stretch)

2. 顶部对齐 (flex-start)

3. 底部对齐 (flex-end)

4. 居中对齐 (center)

5. 基线对齐 (baseline)

CSS 语法

属性值

浏览器支持

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功