FlexboxGrid
Grid layout component implemented via CSS Flexbox, providing 24 grids.
Import
import { FlexboxGrid } from 'rsuite';
// or
import FlexboxGrid from 'rsuite/FlexboxGrid';Examples
Basic
Layout
Alignment
Order
Responsive
Responsiveness can be achieved by combining with the <Col> component.
Props
<FlexboxGrid>
| Property | Type(default) |
Description |
|---|---|---|
| align | '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 | '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 |