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 |