Flex

Flex allows users to build Flexible Box Module based layouts. It serves as a technical component that abstracts users from working directly with CSS Flexbox and helps them write more semantic layouts.

Props

NameTypeDescriptionDefault
direction'row' | 'row-reverse' | 'column' | 'column-reverse'Sets flex-direction CSS property. See MDN for further information.'row'
justifyContent'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly'Sets justify-content CSS property. See MDN for further information.'flex-start'
alignItems'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline'Sets align-items CSS property. See MDN for further information.'stretch'
alignContent'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | 'stretch'Sets align-content CSS property. See MDN for further information.'normal'
alignSelf'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'Sets align-self CSS property. See MDN for further information.'auto'
wrap'nowrap' | 'wrap' | 'wrap-reverse'Sets flex-wrap CSS property. See MDN for further information.'nowrap'
gap'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | GapSets gap CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
  • rowGap: gutter between rows.
  • columnGap: gutter between columns.
'0rem'
grownumberSets flex-grow CSS property. See MDN for further information.0
shrinknumberSets flex-shrink CSS property. See MDN for further information.1
ordernumberSets order CSS property. See MDN for further information.0
basisstringSets flex-basis CSS property. See MDN for further information.'auto'
askeyof HTMLElementTagNameMapSets a custom HTML tag.'div'
Required
children
React.ReactNodeCustom content inside the flex container.-

Examples

Direction and alignment

Gap, order and grow