A layout component that uses flexbox to help arrange its children in rows or columns with powerful alignment and spacing controls.
import { Flex, HStack, VStack } from '@styled-system/jsx'
<Flex direction="row" gap="4" align="flex-start" justify="flex-start" > <Box>Item 1</Box> <Box>Item 2</Box> <Box>Item 3</Box> </Flex>
Flex accepts all common properties mentioned in the layout guide along with these flex-specific properties:
direction
flex-direction
row
row-reverse
column
column-reverse
align
align-items
flex-start
flex-end
center
baseline
stretch
justify
justify-content
space-between
space-around
space-evenly
wrap
flex-wrap
nowrap
wrap-reverse
gap
basis
flex-basis
grow
flex-grow
shrink
flex-shrink
flex
These are specialized Flex components that share the following properties:
Both components also accept all other common properties mentioned in the layout guide.
HStack and VStack are specialized Flex components with convenient defaults: