Flex 是一个基础布局组件，可自适应地水平或垂直对齐子内容。Flex 是 HStack 和 VStack 等组件的底层支持。

用法

Flex 需配合其两个子组件之一使用：FlexItem 和 FlexBlock。

import { Flex, FlexBlock, FlexItem } from '@wordpress/components';

function Example() {
    return (
        <Flex>
            <FlexItem>
                <p>Code</p>
            </FlexItem>
            <FlexBlock>
                <p>Poetry</p>
            </FlexBlock>
        </Flex>
    );
}

属性

align: CSSProperties[‘alignItems’]

使用 CSS Flexbox align-items 对齐子元素。如果 direction 为 row，则垂直对齐内容；如果 direction 为 column，则水平对齐内容。

  • 是否必填：否
  • 默认值：center

direction: ResponsiveCSSValue<CSSProperties[‘flexDirection’]>

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

  • 是否必填：否
  • 默认值：row

expanded: boolean

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

  • 是否必填：否
  • 默认值：true

gap: number

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

  • 是否必填：否
  • 默认值：2

justify: CSSProperties[‘justifyContent’]

如果 direction 为 row，则水平对齐内容；如果 direction 为 column，则垂直对齐内容。

  • 是否必填：否
  • 默认值：space-between

wrap: boolean

确定子元素是否应换行。

  • 是否必填：否
  • 默认值：false