VStack

VStack (or Vertical Stack) is a layout component that arranges child elements in a vertical line.

Usage

VStack can render anything inside.

import {
    __experimentalText as Text,
    __experimentalVStack as VStack,
} from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <Text>Code</Text>
            <Text>is</Text>
            <Text>Poetry</Text>
        </VStack>
    );
}

Props

alignment: HStackAlignment | CSSProperties[‘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: Justifies content to be evenly spread out up to the main axis edges of the container.
• stretch: Stretches content to the cross axis edges of the container.

direction: FlexDirection

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

expanded: boolean

Expands to the maximum available width (if horizontal) or height (if vertical).

justify: CSSProperties[‘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: CSSProperties[‘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: boolean

Determines if children should wrap.

Spacer

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

import {
    __experimentalSpacer as Spacer,
    __experimentalText as Text,
    __experimentalVStack as VStack,
} from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <Text>Code</Text>
            <Spacer>
                <Text>is</Text>
            </Spacer>
            <Text>Poetry</Text>
        </VStack>
    );
}

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

import {
    __experimentalSpacer as Spacer,
    __experimentalText as Text,
    __experimentalVStack as VStack,
} from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <Text>Code</Text>
            <Spacer />
            <Text>is</Text>
            <Text>Poetry</Text>
        </VStack>
    );
}