align-self

# align-self

在 Flex 弹性布局中设置元素在容器中的交叉轴方向的对齐方式，覆盖父元素设置的 align-items 值。

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS
4.0	3.9	4.11	4.61

# 语法

align-self: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>;

# align-self 的属性值

名称

兼容性

描述

auto

设置为父元素的 align-items 值。

center

flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

flex-start

flex 元素会对齐到 cross-axis 的首端。

flex-end

flex 元素会对齐到 cross-axis 的尾端。

stretch

如果元素未设置高度或设为auto，将占满整个容器的高度。

baseline

Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。If the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.