一切知识的开端：认识Flex弹性布局属性 align-self

何谓 align-self 属性？

align-self属性是Flexbox布局系统中用来设置项目自身对齐方式的属性。它可以指定项目在主轴（即项目水平排列方向，默认为水平方向）上的对齐方式，或者指定项目在交叉轴（即项目垂直排列方向，默认为垂直方向）上的对齐方式。

align-self属性的默认值为auto，表示项目在主轴上居中对齐，在交叉轴上拉伸以填充整个可用空间。

以下是一些align-self属性的常见取值：

• start：将项目在主轴上对齐到起始位置（从左到右的语言中为左对齐，从右到左的语言中为右对齐）。
• end：将项目在主轴上对齐到结束位置（从左到右的语言中为右对齐，从右到左的语言中为左对齐）。
• center：将项目在主轴上居中对齐。
• stretch：将项目在主轴上拉伸以填充整个可用空间。
• baseline：将项目在主轴上沿基线对齐。

align-self属性还支持以下特殊值：

• auto：项目在主轴上居中对齐，在交叉轴上拉伸以填充整个可用空间。
• inherit：从父元素继承align-self属性的值。
• unset：将align-self属性的值重置为其初始值（auto）。

align-self 与 align-items 的区别

align-self属性和align-items属性都是用于设置项目对齐方式的属性，但它们的区别在于作用范围不同。align-self属性只对单个项目起作用，而align-items属性对容器中的所有项目起作用。

也就是说，align-self属性允许您对单个项目进行更精细的控制，而align-items属性则用于设置容器中所有项目的默认对齐方式。

在项目中应用 align-self

我们可以将align-self属性应用于任何Flexbox布局中的项目。为了应用align-self属性，需要先设置flex属性为一个值，比如flex: 1;。

.item {
  flex: 1;
  align-self: center;
}

这将使得项目在主轴上居中对齐，在交叉轴上拉伸以填充整个可用空间。

用例

align-self属性可以在许多不同的场景中使用。例如，我们可以使用align-self属性来：

• 将一个项目在容器中居中对齐：

.item {
  flex: 1;
  align-self: center;
}

• 将一个项目在容器中拉伸以填充整个可用空间：

.item {
  flex: 1;
  align-self: stretch;
}

• 将一个项目在容器中沿基线对齐：

.item {
  flex: 1;
  align-self: baseline;
}

align-self属性是一个非常强大的工具，可以帮助我们创建更加复杂的Flexbox布局。