FlexboxGrid
Grid layout component implemented via CSS Flexbox, providing 24 grids.
Import
import { FlexboxGrid } from 'rsuite';
// or
import FlexboxGrid from 'rsuite/FlexboxGrid';Examples
Default
Layout
Alignment
Order
Responsive
Responsiveness can be achieved by combining with the <Col> component.
Props
<FlexboxGrid>
| Property | Type(default) |
Description |
|---|---|---|
| align | enum: 'top' , 'middle' , 'bottom' ('top') |
align |
| as | ElementType ('div') |
You can use a custom element for this component |
| classPrefix | string ('flex-box-grid') |
The prefix of the component CSS class |
| justify | enum : 'start', 'end', 'center', 'space-around', 'space-between' ('start') |
horizontal arrangement |
<FlexboxGrid.Item>
| Property | Type(default) |
Description |
|---|---|---|
| as | ElementType ('div') |
You can use a custom element for this component |
| classPrefix | string ('flex-box-grid-item') |
The prefix of the component CSS class |
| colspan | number (0) |
spacing between grids |
| order | number (0) |
grid orders for sorting |