水平堆栈

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

HStack（水平堆栈）将子元素排列成一行。

用法

HStack 可以渲染内部任意内容。

import { __experimentalHStack as HStack } from '@wordpress/components';

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

属性

alignment

类型: HStackAlignment | CSS[ 'alignItems' ]

确定子元素的对齐方式。

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

direction

类型: FlexDirection

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

expanded

类型: boolean

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

justify

类型: CSS['justifyContent']

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

spacing

类型: CSS['width']

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

wrap

类型: boolean

确定子元素是否应该换行。

Spacer

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

import {
    __experimentalHStack as HStack,
    __experimentalSpacer as Spacer,
} from '@wordpress/components';

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

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

import {
    __experimentalHStack as HStack,
    __experimentalSpacer as Spacer,
} from '@wordpress/components';

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