#deprecated linear-layout-gravity

#Introduction

The position of the child element in the linear container, perpendicular to the layout direction, is a property of the child element's layout, similar to align-self in flexible box layout.

When using linear-layout-gravity, align-self, linear-cross-gravity, and align-items simultaneously in a linear layout, the priority decreases from the first to the last. A higher-priority style will override a lower-priority style.

#Examples

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

Code

Preview

#Syntax

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

#Values

• none

  Default value。When the size of the parent element cross axis size(such as the width when linear-direction: column) is fixed, and the size of the child element in this direction is auto, none will be equivalent to fill-horizontal or fill-vertical. In other cases it is equivalent to left or top.

• stretch

  Fill the container's cross axis.

• start

  Align the beginning of the parent element's cross axis.

• end

  Align the end of the parent element's cross axis.

• center

  Align the center of the parent element's cross axis.

• top deprecated

  Align the top of the parent element, the horizontal layout takes effect.

• bottom deprecated

  Align the bottom of the parent element, the horizontal layout takes effect.

• left deprecated

  Align the left side of the parent element, vertical layout takes effect.

• right deprecated

  Align the right side of the parent element, vertical layout takes effect.

• center-vertical deprecated

  Centered in the vertical direction, the horizontal layout of the parent element takes effect.

• center-horizontal deprecated

  Centered in the horizontal direction, the vertical layout of the parent element takes effect.

• fill-vertical deprecated

  Fill the entire container vertically, and the horizontal layout of the parent element takes effect.

• fill-horizontal deprecated

  Fill up the container horizontally, and the vertical layout of the parent element takes effect.

#Formal definition

#Formal syntax

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

#Difference between web

• No such style in Web.

#Compatibility

#FAQ

• None and top/left in linear-layout-gravity are not the same. The specific differences are as follows:

• When the parent's non-layout orientation is fixed size, none behaves the same as fill-vertical/fill-horizontal, i.e., fills the parent's non-layout orientation. None behaves the same as top/right when the parent's non-layout orientation is not a fixed size.