云策 WordPress 开发者社区

块编辑器开发文档

Flex

查看官方原文 ↗
💡 云策文档标注

概述

Flex 是 WordPress 组件库中的一个基础布局组件，用于自适应地水平或垂直对齐子内容。它支持 FlexItem 和 FlexBlock 子组件，并提供了灵活的 CSS Flexbox 属性配置。

关键要点

  • Flex 是一个布局组件，用于对齐子内容，是 HStack 和 VStack 等组件的基础。
  • 使用 Flex 时需配合 FlexItem 或 FlexBlock 子组件，通过导入 @wordpress/components 来使用。
  • 主要属性包括 align、direction、expanded、gap、justify 和 wrap，用于控制对齐、方向、扩展、间距、分布和换行行为。

代码示例

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

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

注意事项

  • align 属性根据 direction 设置垂直或水平对齐，默认值为 center。
  • direction 属性控制子内容流方向，row 为水平，column 为垂直，默认值为 row。
  • expanded 属性默认为 true，表示在水平或垂直方向上扩展到最大可用宽度或高度。
  • gap 属性用于调整子元素间距，值作为网格系统（基数为 4px）的乘数，默认值为 2。
  • justify 属性根据 direction 设置水平或垂直分布，默认值为 space-between。
  • wrap 属性决定子元素是否换行，默认值为 false。
📄 原文内容

Flex is a primitive layout component that adaptively aligns child content horizontally or vertically. Flex powers components like HStack and VStack.

Usage

Flex is used with any of it’s two sub-components, FlexItem and FlexBlock.

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

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

Props

align: CSSProperties['alignItems']

Aligns children using CSS Flexbox align-items. Vertically aligns content if the direction is row, or horizontally aligns content if the direction is column.

  • Required: No
  • Default: center

direction: ResponsiveCSSValue<CSSProperties['flexDirection']>

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

  • Required: No
  • Default: row

expanded: boolean

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

  • Required: No
  • Default: true

gap: number

Spacing in between each child can be adjusted by using gap. The value of gap works as a multiplier to the library’s grid system (base of 4px).

  • Required: No
  • Default: 2

justify: CSSProperties['justifyContent']

Horizontally aligns content if the direction is row, or vertically aligns content if the direction is column.

  • Required: No
  • Default: space-between

wrap: boolean

Determines if children should wrap.

  • Required: No
  • Default: false