CSS align-items 属性

2025/4/18 14:49:33 来源：https://blog.csdn.net/geng1025/article/details/145273774 浏览: 次关键词：CSS align-items 属性

定义和用法

align-items 属性为弹性容器内的项目指定默认对齐方式。

提示：请使用每个项目的 align-self 属性来覆盖这个 align-items 属性。

实例

将弹性 <div> 元素的所有项目的居中对齐：

<!DOCTYPE html>
<html>
<head>
<style> 
#main {width: 220px;height: 300px;border: 1px solid black; display: flex;align-items: center;
}#main div {flex: 1;
}
</style>
</head>
<body><div id="main"><div style="background-color:coral;">红色</div><div style="background-color:lightblue;">蓝色</div>  <div style="background-color:lightgreen;">有更多内容的绿色 div</div>
</div><p><b>注释：</b>Internet Explorer 10 以及更早的版本不支持 align-items 属性。</p></body>
</html>

CSS 语法

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

属性值

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