Stack #

Quickly layout components through Flexbox, support vertical and horizontal stacking, support custom spacing and wrap.

Import #

import { Stack } from 'rsuite';

// or
import Stack from 'rsuite/Stack';

Examples #

Default #

Dividers #

Wrap #

Interactive #

Props #

<Stack> #

Property	Type(default)	Description
alignItems	'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'	Define the alignment of the children in the stack on the cross axis
classPrefix	string ('stack')	The prefix of the component CSS class
direction	'row' | 'row-reverse' | 'column' | 'column-reverse'	The direction of the children in the stack
divider	ReactNode	Add an element between each child
justifyContent	'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'	Define the alignment of the children in the stack on the inline axis
spacing	number | string	Define the spacing between immediate children
wrap	boolean	Define whether the children in the stack are forced onto one line or can wrap onto multiple lines