Interface FlexProps

Accepted values for using flexbox.

Essentially, all the well-known HTML properties are available, but with predefined values.

See below for an example using some of the properties:

Example:

<View
   direction="column"
   alignItems="center"
>
 <Text>My awesome text</Text>
 <Text>My awesome text</Text>
 <Text>My awesome text</Text>
</View>

Hierarchy

Properties

alignContent? alignItems? alignSelf? basis? direction? flexNone? flexWrap? gap? grow? justifyContent? justifyItems? justifySelf? order? shrink?

Properties

Optional alignContent

alignContent?: "center" | "start" | "end" | "between" | "around"

Content alignment through the element axis

Example:

  <alignContent="center" />

Optional alignItems

alignItems?: "center" | "start" | "end" | "between" | "around"

Item alignment through the element axis

Example:

  <alignItems="center" />

Optional alignSelf

alignSelf?: "center" | "start" | "end" | "between" | "around"

Self alignment through the element axis

Example:

  <alignSelf="center" />

Optional basis

basis?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Controls grow and shrink in one index

Example:

  <basis={1} />

Optional direction

direction?: "row" | "column" | "row-reverse" | "column-reverse"

Direction of the FlexBox axis

Example:

   <direction="row" />

Optional flexNone

flexNone?: boolean

Annulate flex properties

Example:

  <flexNone={true} />

Optional flexWrap

flexWrap?: "nowrap" | "wrap" | "reverse"

Activate content wrapping

Example:

  <flexWrap="wrap" />

Optional gap

gap?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Changes the gap between elements

Example:

  <gap={1} />

Optional grow

grow?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Growth ratio of element

Example:

  <grow={1} />

Optional justifyContent

justifyContent?: "center" | "start" | "end" | "between" | "around" | "evenly"

Content distribution through the element axis

Example:

  <justifyContent="center" />

Optional justifyItems

justifyItems?: "center" | "start" | "end" | "between" | "around"

Item distribution through the element axis

Example:

  <JustifyItems="center" />

Optional justifySelf

justifySelf?: "center" | "start" | "end" | "between" | "around"

Self distribution through the element axis

Example:

  <justifySelf="center" />

Optional order

order?: number

Changes the order of elements

Example:

  <order="center" />

Optional shrink

shrink?: number | "auto" | "inherit" | "initial" | "unset" | "revert" | "revert-layer"

Shrink ratio of element

Example:

  <shrink={1} />

Settings

Member Visibility

Theme

On This Page