CSS Align Self

Align Self

align-items 属性的 grid 或 flex 元素的自对齐方式会被 CSS 属性覆盖。在 Grid 中，它会在网格区域内对齐对象；在 Flexbox 中，它会在交叉轴上对齐元素。

此属性不适用于表格单元格和块级框。当 flex 元素的交叉轴边距设置为 auto 时，align-self 将被忽略。

语法

值

1. Auto

等于父级的 align-items 值。

2. Normal

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

• 在绝对定位布局中，此关键字对所有其他绝对定位的框都表现为 stretch，对替换的绝对定位框则表现为 start。
• 在静态位置的绝对定位布局中，此关键字表现为 stretch。
• 对于 flex 元素，此关键字表现为 stretch。
• 此关键字对 grid 元素表现为 stretch，但对具有内在尺寸或纵横比的框除外，在这种情况下它表现为 start。
• 此属性不适用于表格单元格和块级框。

3. Self-start

使对象在交叉轴上的起始边与对齐容器的边缘对齐。

4. Self-end

使对象在交叉轴上的结束边与对齐容器的边缘对齐。

5. Flex-start

flex 元素的交叉起始边距边缘与线的交叉起始边对齐。

6. Flex-end

flex 元素的交叉结束边距边缘与线的交叉结束边对齐。

7. Center

flex 元素的边距框位于交叉轴线的中间。如果元素的交叉尺寸超过了 flex 容器的容量，它将均匀地溢出到两边。

8. Base, first baseline, final baseline

声明一个框参与 first- 或 last-baseline 对齐，该对齐将框的第一个或最后一个基线集合对齐基线与它们所在的基线共享组中所有框的相应基线对齐。对于 first baseline，备用对齐是 start，对于 last baseline，它是 end。

9. Stretch

如果元素在交叉轴上的总尺寸小于对齐容器的尺寸，并且该元素是自动调整大小的，则会均匀地（而不是按比例）增加元素的大小，同时遵守 max-height/max-width（或等效功能）的限制。这确保了对齐容器在交叉轴上的长度被所有自动调整大小的元素完全填充。

10. Safe

如果元素的大小超过了对齐容器，则该元素将按 start 的方式对齐。

11. Unsafe

无论元素和对齐容器的相对大小如何，都会尊重指定的对齐值。

形式化定义

• 初始值： Auto
• 适用于： Flex 元素、grid 元素和绝对定位的框。不适用于...
• 继承： 否
• 计算值： Auto 计算为 start（如果框没有父级）或父级的计算值 align-items（不包括任何旧关键字）。它也在绝对定位的元素上进行自身计算。布局模型决定其行为，如 justify-self 所解释的那样。或者，也可能是一个指定值。

正式语法

示例

HTML

CSS