对齐自身 | align-self

align-self 属性将当前弹性行的 flex 项与 "align-items" 值对齐。如果任何项目的横轴边距设置为auto，则align-self忽略。

该属性不适用于块级框或表单元格。

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

/* Positional alignment */ 
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: left; /* Put the item at the left */ 
align-self: right; /* Put the item at the right */ 

/* 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: unset;

语法

值

auto计算父级的align-items值。

normal这个关键字的效果取决于我们所在的布局模式：

• 在绝对定位的布局中，关键字的行为类似于start上取代绝对定位的盒子stretch上所有其他绝对定位的箱子。

• 在绝对定位布局的静态位置中，关键字表现为stretch.

• 对于Flex项，关键字表现为stretch.

• 对于网格项，此关键字将导致类似于stretch，但具有高宽比或内部大小的盒子除外，其行为方式如下start.

• 该属性不适用于块级别框和表格单元格。

self-start将对齐的项目与横轴上对应项目起点的对齐容器的边缘对齐。

self-end将对齐的项目与横轴上对应于项目的端侧的对齐容器的边缘对齐。

flex-startFlex项目的交叉开始边缘边缘与线条的交叉起始边缘一起被刷新。

flex-endFlex项目的交叉边缘边缘与线条的交叉边缘齐平。

centerFlex项目的边距框在交叉轴线上居中。如果物品的交叉尺寸大于柔性容器，则它将在两个方向上均等地溢出。

baseline

first baseline

last baseline指定参与第一个或最后一个基线对齐：将框的第一个或最后一个基准集的对齐基线与其基准共享组中所有框的共享的第一个或最后一个基准集中的相应基线对齐。

第一个基线的回退对齐方式为start，最后一个基线为是end。stretch如果沿着横轴的物品的组合尺寸小于对齐容器的auto尺寸并且物品是大小的，则它的尺寸被同等地（不成比例地）增加，同时仍然遵守由max-height/ max-width（或者等同的功能）所施加的约束，以便所有auto尺寸的物品的组合尺寸正好沿横轴填充对齐容器。safe如果项目的大小溢出对齐容器，则对齐项目就像对齐模式一样对齐start。unsafe无论物品和对齐容器的相对大小如何，给定的对齐值都是可以接受的。

形式语法

auto | flex-start | flex-end | center | baseline | stretch

示例

HTML

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

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;
}

结果

规范

浏览器兼容性