Layout 栅格布局

使用 fui-row 和 fui-col 组织 24 列栅格。列组件需要放在行组件内部，以读取间距及 nvue 宽度配置。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<!-- 栅格行 -->
<fui-row :gutter="20">
  <!-- 第一列 -->
  <fui-col :span="12"><text>左侧</text></fui-col>
  <!-- 第二列 -->
  <fui-col :span="12"><text>右侧</text></fui-col>
</fui-row>

行组件属性

属性	类型	说明	默认值
isFlex	Boolean	是否启用 flex 排列；nvue 默认使用 flex	false
justify	String	水平排列：start、end、center、space-around、space-between	start
align	String	垂直排列：top、middle、bottom	top
marginTop	String	上外边距，可带单位	'0'
marginBottom	String	下外边距，可带单位	'0'
gutter	Number	列之间的间距，单位 rpx	0
width	Number、String	nvue 下计算列宽使用的行宽，单位 rpx	750

列组件属性

属性	类型	说明	默认值
span	Number	占据的列数，总列数为 24	24
offset	Number	左侧留出的列数	0
pushLeft	Number	向右偏移的列数	-1
pullRight	Number	向左偏移的列数	-1
xs	Number、Object	对应屏幕断点下的列数或栅格配置	-1
sm	Number、Object	对应屏幕断点下的列数或栅格配置	-1
md	Number、Object	对应屏幕断点下的列数或栅格配置	-1
lg	Number、Object	对应屏幕断点下的列数或栅格配置	-1
xl	Number、Object	对应屏幕断点下的列数或栅格配置	-1

事件

事件	说明	回调参数
—	无自定义事件	—

平台说明

响应式断点属性在非 nvue 平台使用；nvue 通过行组件的 width 计算列宽。具体断点及各平台行为请以组件内的条件编译样式为准。

插槽

插槽	说明
default	放置栅格列

Layout 栅格布局 ​

支持平台 ​

基础用法 ​

行组件属性 ​

列组件属性 ​

事件 ​

平台说明 ​

插槽 ​

Layout 栅格布局

支持平台

基础用法

行组件属性

列组件属性

事件

平台说明

插槽