对齐自身 | align-self

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在绝对定位的元素上计算自身，并在所有其他框上计算父对齐项的计算值（减去任何遗留关键字），或者在框没有父项时开始计算。它的行为取决于布局模型，如justify-self所描述的。否则指定的值。
动画类型	离散的
规范的顺序	形式语法定义的独特的非模糊顺序

语法

值

auto计算父级的align-items值。

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

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

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

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

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

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

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

结果

规范

Specification	Status	Comment
CSS Box Alignment ModuleThe definition of 'align-self' in that specification.	Working Draft	Adds the first \| last ? baseline, self-start, self-end, start, end, left, right, unsafe \| safe values.
CSS Flexible Box Layout ModuleThe definition of 'align-self' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	21.0-webkit 36.0	(Yes)	20.0 (20.0)1	11.0	12.10	No support
start, end	?	?	(Yes)	?	?	?
left, right	?	?	52.0 (52.0)3	?	?	?
baseline	?	?	(Yes)	?	?	?
first baseline, last baseline	?	?	52.0 (52.0)	?	?	?
stretch	?	?	52.0 (52.0)	?	?	?

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)-webkit (Yes)	(Yes)	?	No support	12.10
start, end	?	?	?	?	?	?	?
left, right	?	?	?	52.0 (52.0)3	?	?	?
baseline	?	?	?	(Yes)	?	?	?
first baseline, last baseline	?	?	?	52.0 (52.0)	?	?	?
stretch	?	?	?	52.0 (52.0)	?	?	?