#deprecated linear-layout-gravity

#介绍

子元件在线性布局中垂直于布局方向上的位置，作用在子元件上。类似于弹性布局的 align-self。

当在线性布局中同时使用 linear-layout-gravity、align-self、linear-cross-gravity 和 align-items 时，优先级从前到后依次降低。优先级高的会覆盖优先级低的样式。

#使用示例

css-apisrc/linear-layout-gravity/App.tsx

Code

预览

#语法

linear-layout-gravity: none;
linear-layout-gravity: stretch;
linear-layout-gravity: start;
linear-layout-gravity: end;
linear-layout-gravity: center;

#取值

• none

  默认值。当父容器（linear containers）的交叉轴上的大小（如 linear-direction: column 时的 width）固定，且该子元件在该方向的宽度为 auto 时，none 将等同于 fill-horizontal 或 fill-vertical。在其他情况下则等同与 left 或 top。

• stretch

  填满父容器交叉轴。

• start

  对齐父容器的交叉轴开始端。

• end

  对齐父容器的交叉轴结束端。

• center

  元件在父容器交叉轴居中。

• top deprecated

  不推荐使用，使用 start 代替。对齐父容器的顶端，横向布局生效。

• bottom deprecated

  不推荐使用，使用 end 代替。对齐父容器的底端，横向布局生效。

• left deprecated

  不推荐使用，使用 start 代替。对齐父容器的左侧，纵向布局生效。

• right deprecated

  不推荐使用，使用 end 代替。对齐父容器的右侧，纵向布局生效。

• center-vertical deprecated

  不推荐使用，使用 center 代替。垂直方向上居中，父容器横向布局生效。

• center-horizontal deprecated

  不推荐使用，使用 center 代替。水平方向上居中，父容器纵向布局生效。

• fill-vertical deprecated

  不推荐使用，使用 stretch 代替。纵向填满整个容器，父容器横向布局生效。

• fill-horizontal deprecated

  不推荐使用，使用 stretch 代替。横向填满整个容器，父容器纵向布局生效。

#形式定义

#形式语法

linear-layout-gravity = none | stretch | start | end | center

#与 Web 的区别

• Web 无该样式。

#兼容性

#常见问题

• linear-layout-gravity 中 none 与 top/left 并不相同，具体区别如下：
  • 当父亲的交叉轴为固定大小时，none 与 fill-vertical/fill-horizontal 表现相同，即撑满父亲非布局方向。
  • 当父亲交叉轴不是固定大小时，none 与 top/right 表现相同。