FlexboxGrid 弹性栅格

通过 CSS Flexbox 实现的栅格布局组件,提供 24 栅格。

获取组件

import { FlexboxGrid } from 'rsuite';

// or
import FlexboxGrid from 'rsuite/FlexboxGrid';

演示

默认

布局

对齐排列

排序

响应式

<Col> 组件结合可以实现响应式。

Props

<FlexboxGrid>

属性名称 类型(默认值) 描述
align 'top' | 'middle' | 'bottom' ('top') 对齐方式
as ElementType ('div') 为组件自定义元素类型
classPrefix string ('flex-box-grid') 组件 CSS 类的前缀
justify 'start' | 'end' | 'center' | 'space-around' | 'space-between' ('start') 水平排列方式

<FlexboxGrid.Item>

属性名称 类型(默认值) 描述
as ElementType ('div') 为组件自定义元素类型
classPrefix string ('flex-box-grid-item') 组件 CSS 类的前缀
colspan number (0) 栅格占位格数
order number (0) 栅格顺序,用于排序
Vercel banner