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 #

Basic #

Dividers #

Space #

Wrap #

Interactive #

Adjust Single Item #

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

<Stack.Item> #

Property	Type(default)	Description
alignSelf	'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'	Define the alignment of the Item in the stack
flex	string | number	Define the item will grow or shrink to fit the space available in its flex container
grow	string | number	Define the item grow factor of a flex item main size
shrink	number	Define the item shrink factor of a flex item
basis	string	Define the initial main size of the item
order	number	Define the order of the item in the stack