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.


direction: 'row' | 'row-reverse' | 'column' | 'column-reverse''row'Sets flex-direction CSS property.
justifyContent: 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly' 'flex-start'Sets justify-content CSS property.
alignItems: 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline''stretch'Sets align-items CSS property.
alignContent: 'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | 'stretch''normal'Sets align-content CSS property.
alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch''auto'Sets align-self CSS property.
wrap: 'nowrap' | 'wrap' | 'wrap-reverse''nowrap'Sets flex-wrap CSS property.
gap: string | Gap'0'Sets gap CSS property.
grow: number0Sets flex-grow CSS property.
shrink: number1Sets flex-shrink CSS property.
order: number0Sets order CSS property.
basis: string'auto'Sets flex-basis CSS property.
as: ElementType'div'Sets a custom HTML tag.
children: nodeCustom content inside the flex container.


Direction and alignment

Gap, order and grow