Flex

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