Flex

The Flex component extends Box with display: flex by default, making it easy to create flexbox layouts.

Import

import { Flex } from 'theme-ui'

Usage

<Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
  <div>Left</div>
  <div>Right</div>
</Flex>

Props

Flex accepts all Box props with display: flex applied by default.

React.ElementType

Render as a different HTML element. Defaults to 'div'.

ThemeUIStyleObject

Theme-aware styles. The display: flex is automatically applied, but can be overridden.

<Flex
  sx={{
    flexDirection: 'column',
    gap: 3,
  }}
>
  Stacked items
</Flex>

string

Apply a variant style from the theme.

Spacing Props

Flex inherits all spacing props from Box (m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py).

Color Props

Flex inherits all color props from Box (color, bg, backgroundColor, opacity).

Examples

Horizontal Layout

<Flex sx={{ gap: 3 }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Centered Content

<Flex
  sx={{
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: '100vh',
  }}
>
  Centered content
</Flex>

Column Layout

<Flex sx={{ flexDirection: 'column', gap: 2 }}>
  <div>Top</div>
  <div>Middle</div>
  <div>Bottom</div>
</Flex>

Space Between

<Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
  <span>Label</span>
  <button>Action</button>
</Flex>

Responsive Direction

<Flex
  sx={{
    flexDirection: ['column', 'row'],
    gap: 3,
  }}
>
  <div>Stacks on mobile, horizontal on desktop</div>
  <div>Item 2</div>
</Flex>

Core

Styling

Color Modes

Components

Packages

Import

Usage

Props

Spacing Props

Color Props

Examples

Horizontal Layout

Centered Content

Column Layout

Space Between

Responsive Direction

​Import

​Usage

​Props

​Spacing Props

​Color Props

​Examples

​Horizontal Layout

​Centered Content

​Column Layout

​Space Between

​Responsive Direction

Import

Usage

Props

Spacing Props

Color Props

Examples

Horizontal Layout

Centered Content

Column Layout

Space Between

Responsive Direction