Title: Flex
Published: March 9, 2021
Last modified: September 4, 2026

---

# Flex

## In this article

 * [Usage](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#usage)
 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#props)
    - [align: CSSProperties[‘alignItems’]](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#align-csspropertiesalignitems)
    - [direction: ResponsiveCSSValue<CSSProperties[‘flexDirection’]>](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#direction-responsivecssvaluecsspropertiesflexdirection)
    - [expanded: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#expanded-boolean)
    - [gap: number](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#gap-number)
    - [justify: CSSProperties[‘justifyContent’]](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#justify-csspropertiesjustifycontent)
    - [wrap: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#wrap-boolean)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#wp--skip-link--target)

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

## 󠀁[Usage](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#usage)󠁿

`Flex` is used with any of its two sub-components, `FlexItem` and `FlexBlock`.

    ```language-jsx
    import { Flex, FlexBlock, FlexItem } from '@wordpress/components';

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

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#props)󠁿

### 󠀁[align: CSSProperties[‘alignItems’]](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#align-csspropertiesalignitems)󠁿

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’]>](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#direction-responsivecssvaluecsspropertiesflexdirection)󠁿

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](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#expanded-boolean)󠁿

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

 * Required: No
 * Default: `true`

### 󠀁[gap: number](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#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’]](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#justify-csspropertiesjustifycontent)󠁿

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

 * Required: No
 * Default: `space-between`

### 󠀁[wrap: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/flex/?output_format=md#wrap-boolean)󠁿

Determines if children should wrap.

 * Required: No
 * Default: `false`

First published

March 9, 2021

Last updated

September 4, 2026

Edit article

[ Improve it on GitHub: Flex ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/flex/flex/README.md)

[  Previous: FlexItem](https://developer.wordpress.org/block-editor/reference-guides/components/flex-item/)

[  Next: FocalPointPicker](https://developer.wordpress.org/block-editor/reference-guides/components/focal-point-picker/)