#align-self

#介绍

弹性布局、线性布局中，align-self 会在交叉轴上对齐当前容器中的元件。网格布局中，align-self 控制子元件在其网格区域（grid area）内的块向轴上的对齐，且 align-self 会覆盖已有的 align-items 的值。

对于弹性布局，如果任何子元件的交叉轴方向 margin 值设置为 auto，则会忽略 align-self。

#使用示例

css-apisrc/align-self/App.tsx

预览

#语法

/* 基本关键字 */
align-self: stretch;
align-self: auto;

/* 定位对齐 */
align-self: center;
align-self: start;
align-self: end;
align-self: flex-start;
align-self: flex-end;

/* 基线对齐 */
align-self: baseline;

#取值

#auto

默认值。根据 align-items 定义的方式对齐。

#stretch

元件在交叉轴（网格布局是块轴）方向上未设置尺寸（高度/宽度）或设为 auto，会被拉伸到与行相同的高度或列相同的宽度。同时这些元件仍然保持其宽高比例的约束。

#center

在弹性布局、线性布局中，元件在交叉轴居中。

在网格布局中，元件在网格区域的块轴方向上居中。

#start

在弹性布局、线性布局中，元件在交叉轴上对齐起始位置。

在网格布局中，元件在块轴上与网格区域的起始边缘对齐。

#end

在弹性布局、线性布局中，元件在交叉轴上对齐结尾位置。

在网格布局中，元件在块轴上与网格区域的结束边缘对齐。

#flex-start

同 start 表现一致。

#flex-end

同 end 表现一致。

#baseline

元件参与基线对齐。目前仅支持在弹性布局中使用。

#形式定义

#形式语法

align-self = auto | center | start | end | flex-start | flex-end | baseline | stretch

#与 Web 的区别

• 不支持 normal、self-start 和 self-end。

#兼容性