CSS 有没有与“flex-grow”属性（或“flex”）相对应的主轴外的属性

在本文中，我们将介绍与主轴外的“flex-grow”属性（或“flex”）相对应的交叉轴属性。在CSS中，我们可以使用“align-self”属性来进行交叉轴的控制。

阅读更多：CSS 教程

什么是“align-self”属性？

“align-self”属性是Flexbox布局中用于控制单个项目在交叉轴上的对齐方式的属性。它可以被用于单个项目上，来覆盖父容器的“align-items”属性。

如何使用“align-self”属性？

“align-self”属性可以被应用到Flexbox布局中的任何项目上。它可以使用不同的属性值来实现不同的对齐效果。

1. 默认值：auto

当“align-self”属性被设置为“auto”时，它会继承父容器的“align-items”属性的值。这意味着它会根据父容器的设置来对项目进行对齐。

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: auto;
}

在上面的例子中，项目的“align-self”属性被设置为“auto”，它会继承父容器的“align-items”属性，并在交叉轴上与其他项目对齐。

2. 交叉轴起始位置：flex-start

当“align-self”属性被设置为“flex-start”时，项目会沿着交叉轴的起始位置进行对齐。

.item {
  align-self: flex-start;
}

上面的代码会使项目在交叉轴上与其他项目相比，向交叉轴起始位置对齐。

3. 交叉轴结束位置：flex-end

当“align-self”属性被设置为“flex-end”时，项目会沿着交叉轴的结束位置进行对齐。

.item {
  align-self: flex-end;
}

通过上面的代码，项目将会在交叉轴上向其结束位置对齐。

4. 居中对齐：center

当“align-self”属性被设置为“center”时，项目会在交叉轴上居中对齐。

.item {
  align-self: center;
}

上述代码中的项目将会在交叉轴上居中对齐。

5. 基线对齐：baseline

当“align-self”属性被设置为“baseline”时，项目会沿着基线对齐。

.item {
  align-self: baseline;
}

通过以上代码，项目将会沿着基线对齐。

6. 拉伸对齐：stretch

当“align-self”属性被设置为“stretch”时，项目会沿着交叉轴拉伸，以填充父容器中的剩余空间。

.item {
  align-self: stretch;
}

通过上面的代码，项目在交叉轴上被拉伸以填充剩余的空间。

示例

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
</div>

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  align-self: center;
}

在上述示例中，我们有一个父容器（“.container”）和三个项目（“.item”）。父容器的“align-items”属性被设置为“flex-start”，即使项目在交叉轴上顶部对齐。然而，第二个项目的“align-self”属性被设置为“center”，从而使其在交叉轴上居中对齐。

总结

在CSS中，我们可以使用“align-self”属性来控制Flexbox布局中单个项目在交叉轴上的对齐方式。通过设置不同的属性值，可以实现不同的对齐效果。这种属性是“flex-grow”属性（或“flex”）在交叉轴上的对应属性，用于控制项目在交叉轴上的伸缩和对齐。