HStack (Horizontal Stack) arranges child elements in a horizontal line.
HStack can render anything inside.
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.
Automatically wraps children if they're not
The direction flow of the children content can be adjusted with
column will align children vertically and
row will align children horizontally.
Horizontally aligns content if the
row, or vertically aligns content if the
In the example below,
flex-start will align the children content to the left.
The amount of space between each child element. Spacing in between each child can be adjusted by using
The value of
spacing works as a multiplier to the library's grid system (base of
Determines if children should wrap.
Spacer is used within an
Spacer adaptively expands to take up the remaining space.
Spacer also be used in-between items to push them apart.