垂直堆叠

此功能仍处于实验阶段。“Experimental”（实验性）意味着这是早期实现，可能会发生剧烈且破坏性的更改。

VStack（垂直堆栈）是一个布局组件，用于将子元素垂直排列。

用法

VStack 可以渲染任何内部内容。

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

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

属性

alignment: HStackAlignment | CSSProperties[‘alignItems’]

确定子元素的对齐方式。

• top：将内容对齐到顶部。
• topLeft：将内容对齐到左上角。
• topRight：将内容对齐到右上角。
• left：将内容对齐到左侧。
• center：将内容居中对齐。
• right：将内容对齐到右侧。
• bottom：将内容对齐到底部。
• bottomLeft：将内容对齐到左下角。
• bottomRight：将内容对齐到右下角。
• edge：使内容均匀分布，直至容器的主轴边缘。
• stretch：将内容拉伸至容器的交叉轴边缘。

direction: FlexDirection

可以使用 direction 调整子内容的流向。column 将子元素垂直对齐，row 将子元素水平对齐。

expanded: boolean

扩展到最大可用宽度（如果是水平方向）或高度（如果是垂直方向）。

justify: CSSProperties[‘justifyContent’]

如果 direction 为 row，则水平对齐内容；如果 direction 为 column，则垂直对齐内容。
在下面的示例中，flex-start 会将子内容向左对齐。

spacing: CSSProperties[‘width’]

每个子元素之间的间距。可以使用 spacing 调整每个子元素之间的间距。
spacing 的值作为库网格系统（基础值为 4px）的乘数。

wrap: boolean

确定子元素是否应换行。

Spacer

当在 VStack 中使用 Spacer 时，Spacer 会自适应扩展以占据剩余空间。

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

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

Spacer 也可以用于项目之间，将它们分开。

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

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