The Flex component extends Box with display: flex by default, making it easy to create flexbox layouts.
import { Flex } from 'theme-ui'
<Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
<div>Left</div>
<div>Right</div>
</Flex>
display: flex applied by default.
Render as a different HTML element. Defaults to 'div'.
Theme-aware styles. The display: flex is automatically applied, but can be overridden.<Flex
sx={{
flexDirection: 'column',
gap: 3,
}}
>
Stacked items
</Flex>
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>
