Flex

0.6.0-alpha.7

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.

Component

browse

docs

issues

import { Flex } from 'theme-ui';

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)

Properties

	Name	Description	Default
BoxOwnProps (4 properties)

	as	ElementType<any>	-
	variant	string	-
	css	Interpolation<any>	-
	sx	ThemeUIStyleObject	-
SpaceProps (28 properties)
TextColorProps (1 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)
HTMLAttributes (43 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
- (1 properties)

External dependencies

package	imports	peer
@emotion/styled	styled

Internal dependencies

file	imports
"./Box"	Box

theme-ui/Field

theme-ui/Form

Docs

Flex

Component

Overview

Controls

Properties

External dependencies

Internal dependencies