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
Vercel banner