align-self

**align-self** CSS 属性会覆盖网格或弹性项目align-items 的值。在网格中，它会在网格区域 内对齐项目。在弹性盒布局中，它会在交叉轴 上对齐项目。

试一试

该属性不适用于块级盒子或表格单元格。如果弹性盒项目的交叉轴边距为 auto，则会忽略 align-self。

语法

css
/* Keyword values */
align-self: auto;
align-self: normal;

/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */
align-self: anchor-center;

/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */

/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;

Values

auto

计算为父元素的align-items 值。

normal

此关键字的效果取决于我们所处的布局模式。

  • 在绝对定位布局中，该关键字在替换绝对定位盒子中表现得像 start，而在所有其他绝对定位盒子中则表现得像 stretch。
  • 在绝对定位布局的静态位置中，该关键字表现得像 stretch。
  • 对于弹性项目，该关键字表现得像 stretch。
  • 对于网格项目，此关键字会导致类似于 stretch 的行为，除了具有纵横比 或内在尺寸的盒子，它们的行为会像 start。
  • 该属性不适用于块级盒子和表格单元格。
self-start

将项目对齐到与交叉轴上项目起始端对应的对齐容器的边缘对齐。

self-end

将项目对齐到与交叉轴上项目末尾端对应的对齐容器的边缘对齐。

flex-start

弹性项目横向开始边距与该行的横向开始边距对齐。

flex-end

弹性项目横向结束边距与该行的横向结束边距对齐。

center

弹性项目的边距框在该行横轴上居中。如果项目横向尺寸大于弹性容器，它将在两个方向上等量溢出。

baseline, first baseline, last baseline

指定参与第一个或最后一个基线对齐：将盒子第一个或最后一个基线集的对齐基线与该基线共享组中所有盒子的共享第一个或最后一个基线集中的相应基线对齐。first baseline 的回退对齐为 start，last baseline 的回退对齐为 end。

stretch

如果项目沿横轴的组合尺寸小于对齐容器的尺寸，并且项目是 auto 大小，则其尺寸会等量增加（而不是按比例），同时仍然尊重 max-height/max-width（或等效功能）施加的约束，以使所有 auto 大小项目的组合尺寸沿横轴完全填充对齐容器。

anchor-center

对于 锚点定位 元素，将项目与块方向上相关联的锚点元素的中心对齐。请参阅 使用 anchor-center 将项目与锚点元素的中心对齐。

safe

如果项目的尺寸溢出对齐容器，则项目将像对齐模式为 start 一样对齐。

unsafe

无论项目和对齐容器的相对尺寸如何，都会采用给定的对齐值。

正式定义

初始值auto
应用于弹性项目、网格项目和绝对定位的盒子
继承否
计算值auto 在绝对定位元素上计算为自身，在所有其他盒子上的父元素的计算值（减去任何旧版关键字）上计算为 align-items 的计算值，或者如果盒子没有父元素，则计算为 start。其行为取决于布局模型，如 justify-self 所述。否则为指定的值。
动画类型离散

正式语法

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

示例

HTML

html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

css
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

结果

规范

规范
CSS 盒子对齐模块级别 3
# align-self 属性
CSS 弹性盒布局模块级别 1
# align-items 属性

浏览器兼容性

BCD 表格只有在浏览器中加载

另请参阅