Flex

The Flex component is identical to the Box component, but with display: flex set. If you need to alter the display property, use the Box component instead.

Overview

Box 1

Box 2

Box 3

browse

docs

issues

({
  flexDirection,
  p,
}) => (
  <Flex sx={{ flexDirection, p }}>
    <Box sx={{ flex: '1 1 auto', bg: 'background', m: 1 }}>Box 1</Box>
    <Box sx={{ m: 1, bg: 'muted' }}>Box 2</Box>
    <Box sx={{ m: 1, bg: 'secondary' }}>Box 3</Box>
  </Flex>
)

Controls

	Name	Description	Default
- (1 properties)

	flexDirection	options	-
SpaceProps (1 properties)

Box 1

Box 2

Box 3

passed (1)
errors (1)
dashboard

color

show errors

Viewport

Box 1

Box 2

Box 3

320px

Box 1

Box 2

Box 3

375px

Box 1

Box 2

Box 3

768px

Box 1

Box 2

Box 3

1024px

theme-ui/Field

theme-ui/Form

Docs

Flex

Overview

Controls

A11y tests

color

Viewport