CSS align-items - 易学教程，面试笔记经验！

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;

位置对齐

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: 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>

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>

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>

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>

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>

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>

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>

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>

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>

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>