0

HStack

(Horizontal Stack) arranges child elements in a horizontal line.

Usage

can render anything inside.

example.js
Ana
Elsa
Olaf

Props

alignment

Type: HStackAlignment,CSS['alignItems']

Determines how the child elements are aligned.

  • top: Aligns content to the top.
  • topLeft: Aligns content to the top/left.
  • topRight: Aligns content to the top/right.
  • left: Aligns content to the left.
  • center: Aligns content to the center.
  • right: Aligns content to the right.
  • bottom: Aligns content to the bottom.
  • bottomLeft: Aligns content to the bottom/left.
  • bottomRight: Aligns content to the bottom/right.
  • edge: Aligns content to the edges of the container.
  • stretch: Stretches content to the edges of the container.
autoWrap

Type: boolean

Automatically wraps children if they're not FlexItem or FlexBlock elements.

direction

Type: FlexDirection

The direction flow of the children content can be adjusted with direction. column will align children vertically and row will align children horizontally.

justify

Type: CSS['justifyContent']

Horizontally aligns content if the direction is row, or vertically aligns content if the direction is column. In the example below, flex-start will align the children content to the left.

spacing

Type: CSS['width']

The amount of space between each child element. Spacing in between each child can be adjusted by using spacing. The value of spacing works as a multiplier to the library's grid system (base of 4px).

wrap

Type: boolean

Determines if children should wrap.

Spacer

When a is used within an , the adaptively expands to take up the remaining space.

example.js
Ana
Elsa
Olaf

also be used in-between items to push them apart.

example.js
Ana
Elsa
Olaf

See Also