Flexbox Props

Flexbox props enable flexible box layouts with theme-aware values.

Available Props

Prop	CSS Property	Theme Key
alignItems	align-items	none
alignContent	align-content	none
justifyItems	justify-items	none
justifyContent	justify-content	none
flexWrap	flex-wrap	none
flexDirection	flex-direction	none
flex	flex	none
flexGrow	flex-grow	none
flexShrink	flex-shrink	none
flexBasis	flex-basis	none
justifySelf	justify-self	none
alignSelf	align-self	none
order	order	none

Usage

<Flex
  alignItems="center"
  justifyContent="space-between"
  flexWrap="wrap"
>
  <Box flex="1">Flexible item</Box>
  <Box flexShrink="0">Non-shrinking item</Box>
</Flex>

Responsive Flexbox

<Flex
  flexDirection={['column', 'row']} // column on mobile, row on larger screens
  alignItems="center"
  gap={[2, 4]} // theme-aware spacing
>
  {/* Flex items */}
</Flex>