#align-items

#介绍

align-items 属性将所有直接子节点上的 align-self 值设置为一个组。在弹性布局和线性布局中，它控制子元件在交叉轴方向上的对齐。在网格布局中，它控制子元件在其网格区域（grid area）内的块向轴上的对齐。

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

#使用示例

css-apisrc/align-items/App.tsx

Code

预览

#语法

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

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

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

#取值

#stretch

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

#center

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

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

#start

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

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

#end

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

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

#flex-start

同 start 表现一致。

#flex-end

同 end 表现一致。

#baseline

所有弹性项目都对齐，以使它们的弹性容器基线对齐。距离其交叉轴起点和基线之间最远的元件与行的交叉轴起点对齐。暂时只支持弹性布局。

#auto Deprecated

等同于 stretch。不推荐使用，Web 无该取值。

#形式定义

#形式语法

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

#与 Web 的区别

• 不支持 normal、self-start 和 self-end。默认值为 stretch。

#兼容性