Skip to main content

Flex

Creates a flexbox container with appropriate child elements based on the provided as prop.

Examples

Flex

Item 1
Item 2
Item 3
Code
<Flex gap="12px">
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
</Flex>

Responsive Gap

The gap prop can be provided as a responsive value.

Item 1
Item 2
Item 3
Code
<Flex
  gap={{
    mobile: '8px',
    tablet: '12px'
  }}
>
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
</Flex>

As a List

If the as prop is specified as either "ul" or "ol" the children will be rendered as <li> elements.

  • Item 1
  • Item 2
  • Item 3
Code
<Flex
  as="ul"
  gap="12px"
>
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
</Flex>

Wrapping

By default, <Flex> elements don't wrap. Specify wrap as true to enable this.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Code
<Flex
  gap="12px"
  wrap
>
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
  <Placeholder>
    Item 4
  </Placeholder>
  <Placeholder>
    Item 5
  </Placeholder>
  <Placeholder>
    Item 6
  </Placeholder>
  <Placeholder>
    Item 7
  </Placeholder>
  <Placeholder>
    Item 8
  </Placeholder>
  <Placeholder>
    Item 9
  </Placeholder>
  <Placeholder>
    Item 10
  </Placeholder>
  <Placeholder>
    Item 11
  </Placeholder>
  <Placeholder>
    Item 12
  </Placeholder>
  <Placeholder>
    Item 13
  </Placeholder>
  <Placeholder>
    Item 14
  </Placeholder>
  <Placeholder>
    Item 15
  </Placeholder>
</Flex>

Direction

<Flex> defaults to a row but can also be used as a column.

Item 1
Item 2
Item 3
Item 4
Item 5
Code
<Flex
  direction="column"
  gap="12px"
>
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
  <Placeholder>
    Item 4
  </Placeholder>
  <Placeholder>
    Item 5
  </Placeholder>
</Flex>

Alignment

<Flex> elements align to the center of the viewport. Provide a different value to change this. E.g: stretch

Item 1
Item 2
Item 3
Item 4
Item 5
Code
<Flex
  alignItems="stretch"
  direction="column"
  gap="12px"
>
  <Placeholder>
    Item 1
  </Placeholder>
  <Placeholder>
    Item 2
  </Placeholder>
  <Placeholder>
    Item 3
  </Placeholder>
  <Placeholder>
    Item 4
  </Placeholder>
  <Placeholder>
    Item 5
  </Placeholder>
</Flex>

Inline

Specify inline as true to render as a span with inline-flex applied to it.

This is a
Flex
Rendered
Inline
 in a sentence.
Code
<>
  This is a
  <Flex
    gap="12px"
    inline
  >
    <Placeholder>
      Flex
    </Placeholder>
    <Placeholder>
      Rendered
    </Placeholder>
    <Placeholder>
      Inline
    </Placeholder>
  </Flex>
  {' '}in a sentence.
</>

Props

as

ElementType

Component renders by default as a `div` unless another value is passed.

gap

ConditionalStyleWithResponsiveArray<Values<{ none: number; "4px": `var(--${string})`; "8px": `var(--${string})`; "12px": `var(--${string})`; "16px": `var(--${string})`; "20px": `var(--${string})`; "24px": `var(--${string})`; "32px": `var(--${string})`; "40px": `var(--${string})`; "48px": `var(--${string})`; "64px": ...

Content renders with specified gap between the rows or columns if specified.

listClassName

string

Component adds specific class to the li element.

alignItems

ConditionalStyleWithResponsiveArray<Values<("center" | "stretch" | "flex-end" | "flex-start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Specifies how items are laid out along the cross axis.

Default: "center"

justifyContent

ConditionalStyleWithResponsiveArray<Values<("center" | "space-between" | "stretch" | "flex-end" | "flex-start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Specifies how the space between and around the items is rendered.

direction

ConditionalStyleWithResponsiveArray<Values<("column" | "column-reverse" | "row" | "row-reverse")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Content renders as a column if `column` is passed. Default is `row`.

Default: "row"

wrap

boolean

Content will wrap to multiple lines if `true` is passed. Defaults to `false`.

inline

boolean

Determines if 'flex' or 'inline-flex' should be used.

inputRef

Ref<HTMLDivElement | HTMLOListElement | HTMLUListElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509