#
Flex
This example shows a simple Flex row layout with gap and alignment
React / Next.js
Box 1
Box 2
Box 3
Flex
The Flex component is a wrapper around the native flexbox model for layout purposes. It supports advanced props for gap, alignment, direction, and responsiveness.
PropDescriptionValue(s)
`as`The HTML tag to render (e.g. div, section, ul).`keyof JSX.IntrinsicElements | default: "div"`
`direction`Controls flex direction.`'row' | 'column' | 'row-reverse' | 'column-reverse' | default: "row"`
`wrap`Wrap children when overflowing.`'wrap' | 'nowrap' | 'wrap-reverse' | default: "wrap"`
`justify`Aligns children horizontally.`'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'`
`alignItems`Aligns children vertically.`'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'`
`alignContent`Aligns multi-line content.`'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'`
`gap`Sets space between items (applies to both row and column).`number | default: undefined`
`gapX`Sets horizontal spacing only.`number | default: undefined`
`gapY`Sets vertical spacing only.`number | default: undefined`
`gapUnit`Unit to apply to gap values.`'rem' | 'px' | 'em' | default: "rem"`
`grow`Sets flex-grow for this container.`number`
`shrink`Sets flex-shrink.`number`
`basis`Sets flex-basis value.`string (e.g., "200px", "50%")`
`flex`Flex shorthand for grow, shrink, and basis.`string (e.g., "1 0 auto")`
`responsiveSmall`Adds the `responsiveSmall` class.`boolean`
`responsiveMedium`Adds the `responsiveMedium` class.`boolean`
`responsiveLarge`Adds the `responsiveLarge` class.`boolean`
`fullWidth`Sets width to 100%.`boolean`
`fullHeight`Sets height to 100%.`boolean`
`style`Inline styles for the container.`React.CSSProperties`
`className`Additional class names.`string`
`children`The children nodes to render inside the flex container.`ReactNode`
Previous
Rich Text
Next
Accordion