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

CSS 属性

CSS 中的align-self 属性用于控制使用Flexbox 或网格布局的容器内单个项目的对齐方式。虽然align-items用于设置容器中所有项目的默认对齐方式，但align-self允许您覆盖特定项目的对齐方式。

项目在flexbox中的横轴上对齐，而在网格中，该属性对齐网格区域内的项目。

align-self 属性不适用于块级框或表格单元格。如果flexbox项目的横轴边距设置为自动，则忽略align-self值。

属性值

align-self属性可以具有以下值:

auto:根据父项的align-items值对齐项目。
normal:基于布局模式，正常关键字更改的效果:
- 当布局是绝对时，其行为类似于在替换的绝对定位框上开始，以及在所有其他绝对定位框中拉伸定位。
- 行为类似于绝对定位布局的静态位置中的拉伸。
- 行为类似于flexbox项目的拉伸。
- 行为类似于网格项的拉伸，但具有长宽比或固有尺寸的框除外，其行为类似于开始。
- 不适用于块级框和表格单元格。
flex-start:对齐Flex 项目的交叉起始边距边缘与行的交叉起始边距边缘。
flex-end:将 Flex 项目的交叉结束边距边缘与线的交叉端边缘。
center:flexbox项目框的边距在交叉轴上的线内居中。当元素的横向尺寸大于容器时，内容在两个方向上均等溢出。
self-start:项目与对齐容器的边缘对齐对应于横轴上项目的起始侧。
self-end:项目与对齐容器的边缘对齐，该对齐容器对应于项目的结束侧横轴上的项目。
baseline, first baseline, last baseline:
- 第一个基线和最后一个基线是基线的同义词。 First 和 Last 指的是 Flex 项目中的行框。
- 这些值指定内容对齐中的第一个或最后一个基线对齐。
- start 是第一个基线的后备对齐方式，end 是最后一个基线的后备对齐方式。
stretch:当项目沿横轴的组合尺寸小于容器的尺寸，且项目尺寸为auto时，其尺寸等量增加，保持max-height / max的值-width。
safe:当项目溢出容器时，根据起始值设置对齐方式。
unsafe:无论项目和对齐容器的大小如何，都会遵循指定的对齐值。

适用

Flex项目、网格项目和绝对定位框

语法

关键字值

align-self: auto;
align-self: normal;

位置对齐

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

基线对齐

align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch;

CSS align-self: auto

以下示例演示了align-self:auto属性将第三个flex项目放置在flex容器内的初始位置 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: auto;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: start

以下示例演示了align-self:start属性将第三个flex项目放置在flex容器横轴的开始位置 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: end

以下示例演示了align-self: end属性将第三个Flex项目放置在Flex容器横轴的末端 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: center

以下示例演示了align-self: end属性将第三个Flex项目放置在Flex容器横轴的中心 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: flex-start

以下示例演示了align-self: flex-start 属性将第三个 Flex 项目放置在 Flex 容器横轴的开始位置 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: flex-start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: flex-end

以下示例演示了align-self:flex-end属性将第三个Flex项目放置在Flex容器横轴的末端 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: flex-end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: self-start

以下示例演示了align-self:self-start属性在Flex容器的开头对齐第三个Flex项目 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: self-start;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: self-end

以下示例演示了align-self:self-end属性将第三个Flex项目对齐在Flex容器的末尾 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: self-end;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: baseline

以下示例演示了align-self:baseline属性沿基线对齐第三个Flex项目 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
   }
   .flex_container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      align-self: baseline;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS align-self: stretch

以下示例演示了align-self:stretch属性垂直拉伸Flex项目以填充Flex容器的可用空间 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      height: 350px;
      flex-wrap: wrap;
      align-self: stretch;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>