1. 首页
  2. CSS 菜鸟教程
  3. CSS - align-items 属性

CSS - align-items 属性

CSS align-items 属性共同设置所有直接子项的 align-self 值。在 Flexbox 中，它对齐十字轴上的项目，而在网格布局中，它在其网格区域内对齐块轴上的项目。

可能的值

align-items 属性可以具有以下值：

normal：根据布局模式，normal 关键词的效果会发生变化：

  • 当布局绝对定位时，其行为类似于从替换的绝对定位框开始，以及在所有其他绝对定位的框中拉伸。
  • 行为类似于绝对定位布局的静态位置拉伸。
  • 行为类似于弹性物品的拉伸。
  • 其行为类似于网格项的拉伸，但具有纵横比或固有大小的框除外，其行为类似于开始。
  • 不适用于块级框和表格单元格。

flex-start：将 flex 项的交叉起点边距边缘与线的交叉起点边缘对齐。

flex-end：将 flex 项的交叉端边距边缘与线的交叉端边距对齐。

center：flex-items 框的边距在十字轴上的线内居中。当元素的交叉大小时，内容会在两个方向上相等地溢出。

start：项在适当的轴上与容器的起始边缘对齐。

end：项在适当的轴上与容器的端边缘对齐。

self-start：项目在适当的轴上对齐到对齐容器的项的起始侧的边缘。

self-end：项目在适当的轴上对齐到对齐容器的项的结束侧的边缘。

baseline, first baseline, last baseline：对齐项目，使其基线对齐。

stretch：拉伸弹性项，使项的边距框的交叉大小与线相同，同时遵守宽度和高度约束。

safe：与对齐关键字一起使用，当项目溢出容器时，导致任何数据丢失，将对齐方式将根据起始值进行设置。

unsafe：与对齐关键字一起使用，即使项目溢出容器，导致任何数据丢失，也会遵守传递的对齐值。

适用于

所有 HTML 元素。

语法

基本关键字

align-items: normal;
align-items: stretch;

位置对准

align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

基线对齐

align-items: baseline;
align-items: first baseline;
align-items: last baseline;	
align-items: safe center;
align-items: unsafe center;

CSS align-items - 正常值

以下示例演示了 align-items： normal 属性对齐 flex 项以垂直拉伸以填充容器 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: normal;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 开始值

以下示例演示了 align-items： start 属性在容器的十字轴起点对齐 flex 项 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: start;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 结束值

以下示例演示了 align-items： end 属性将容器交叉轴末端的 flex 项对齐 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: end;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 居中值

以下示例演示了 align-items： center 属性将 flex 项对齐在容器的交叉轴中心： -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 弹性启动值

以下示例演示了 align-items： flex-start 属性在容器的十字轴起点对齐 flex 项 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: flex-start;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 弹性端值

以下示例演示了 align-items： flex-end 属性将 flex 项对齐在容器的十字轴末端 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: flex-end;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 自启动值

以下示例演示了 align-items： self-start 属性将 flex 项对齐到 flex 容器的顶部 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: self-start;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-Items - 自端值

以下示例演示了 align-items： self-end 属性将 flex 项对齐到 flex 容器的底部 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: self-end;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 基线值

以下示例演示 align-items： baseline 属性沿其基线对齐 flex 项 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: baseline;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 display: flex;
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	 	 align-items: center;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>

CSS align-items - 拉伸值

以下示例演示了 align-items： stretch 属性垂直拉伸 flex 项以填充 flex 容器的整个空间 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;
	 	 	 align-items: stretch;
	 	 	 background-color: green;
	 	 	 height: 300px;
	 	 	 width: 100%;
	 	}
	 	.flex-container div {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 margin: 5px;
	 	}
	 	.flex-item1 {
	 	 	 min-height: 40px;
	 	}
	 	.flex-item2 {
	 	 	 min-height: 70px;
	 	}
	 	.flex-item3 {
	 	 	 min-height: 50px;
	 	}
	 	.flex-item4 {
	 	 	 min-height: 90px;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item1">Flex item 1</div>
	 	 	 <div class="flex-item2">Flex item 2</div>
	 	 	 <div class="flex-item3">Flex item 3</div>
	 	 	 <div class="flex-item4">Flex item 4</div>
	 	</div>
</body>
</html>
<< CSS - align-content 属性 CSS - align-self 属性 >>