CSS 属性

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

属性值

align-items 属性可以有以下值:

  • normal:根据布局模式，普通关键字的效果发生变化:

    • 当布局绝对定位时，其行为类似于在替换的绝对定位框上开始，以及在所有其他绝对定位框中拉伸。

    • 行为类似于静态位置中的拉伸绝对定位布局。

    • 行为类似于弹性项目的拉伸。

    • 行为类似于网格项目的拉伸，除了对于具有长宽比或固有大小的框，其行为类似于开始。

    • 不适用于块级框和表格单元格。

  • flex-start:将 Flex 项目的交叉起始边距与行的交叉起始边对齐。

  • flex-end:将 Flex 项目的跨端边距边缘与行的跨端边缘对齐。

  • center:弹性项目框的边距在横轴上的线内居中。当元素的横向尺寸大于容器时，内容会在两个方向上均匀溢出。

  • start:项目相对于容器的起始边缘彼此对齐容器，在适当的轴上。

  • end:项目在适当的轴上与容器的末端边缘相互对齐。

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

  • self-end:项目与项目的对齐容器末端的边缘对齐，在适当的轴上。

  • baseline, first baseline, last baseline: 对齐项目，使其基线为对齐。

  • stretch:拉伸 Flex 项目，使项目边距框的交叉尺寸与线条相同，同时遵守宽度和高度约束。

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

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

适用

所有 HTML 元素。

语法

基本关键字

align-items: normal;
align-items: stretch; 
  • 1

位置对齐

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; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

基线对齐

align-items: baseline;
align-items: first baseline;
align-items: last baseline; 
align-items: safe center;
align-items: unsafe center; 
  • 1
  • 2
  • 3
  • 4

CSS align-items: normal

以下示例演示了align-items:nomal属性对齐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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: start

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: end

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align -items: center 

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: flex-start 

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: flex-end 

以下示例演示了align-items: flex-end 属性在容器横轴末端对齐弹性项目 -

<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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: self-start 

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-items: self-end 

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

CSS align-iteme: baseline

以下示例演示了align-items:baseline属性沿基线对齐弹性项目 -

<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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

CSS align-items: stretch

以下示例演示了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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37