CSS | align-self 属性

在 CSS 中，我们可以通过 align-self 属性来设置单个项目在交叉轴（垂直于主轴的轴）方向上的对齐方式。

语法

align-self: auto|flex-start|flex-end|center|baseline|stretch;

• auto: 默认值。元素将保持其包含块中的默认行为，由其父元素来决定交叉轴的对齐方式。
• flex-start: 元素将会与交叉轴的起始边（与主轴起始边相同）对齐。
• flex-end: 元素将会与交叉轴的结束边（与主轴结束边相同）对齐。
• center: 元素将会在交叉轴的中心点上对齐。
• baseline: 元素将会与主轴上的基线对齐。
• stretch: 元素将会被拉伸以适应交叉轴的大小。

说明

align-self 属性仅适用于通过 display: flex 设置为弹性容器的元素的直接子元素。它不会影响其他元素或父元素的对齐方式。如果你需要改变整个弹性容器的对齐方式，应该使用 align-items 属性。

示例

1. 默认值

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

默认情况下，子元素的 align-self 属性值为 auto，由父元素的 align-items 属性来决定它们在交叉轴上的对齐方式。上面的示例中，子元素会垂直居中对齐。

2. align-self 为 flex-start

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  align-self: flex-start;
}

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

子元素的 align-self 属性值为 flex-start，使它们与交叉轴的起始边对齐。

3. align-self 为 flex-end

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  align-self: flex-end;
}

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

子元素的 align-self 属性值为 flex-end，使它们与交叉轴的结束边对齐。

4. align-self 为 center

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  align-self: center;
}

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

子元素的 align-self 属性值为 center，使它们在交叉轴的中心点上对齐。

5. align-self 为 baseline

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  font-size: 24px;
  border: 1px solid #000;
  align-self: baseline;
}

/* HTML */
<div class="container">
  <div class="box">Hello</div>
  <div class="box" style="font-size: 36px;">World</div>
  <div class="box">!</div>
</div>

子元素的 align-self 属性值为 baseline，使它们与主轴上的基线对齐。注意，这里的基线是文本的基线。

6. align-self 为 stretch

/* CSS */
.container {
  display: flex;
  height: 200px;
  align-items: center;
}

.box {
  height: 100%;
  border: 1px solid #000;
  align-self: stretch;
}

/* HTML */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

子元素的 align-self 属性值为 stretch，使它们被拉伸以适应交叉轴的大小。在上面的示例中，子元素的高度被设置为 100%，因此它们会占据整个交叉轴的空间。