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

Space

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