Layout 布局

使用指南

import { Row, Col } from 'fs-ui'

export default {
  components: {
    fsRow: Row,
    fsCol: Col
  }
}

1
2
3
4
5
6
7
8

代码演示

左对齐

<fs-row>
  <fs-col span="6" tag="li">span: 6</fs-col>
  <fs-col span="6" tag="li">span: 6</fs-col>
  <fs-col span="6" tag="li">span: 6</fs-col>
</fs-row>

1
2
3
4
5

居中

<fs-row justify="center">
  <fs-col span="6">span: 6</fs-col>
  <fs-col span="6">span: 6</fs-col>
  <fs-col span="6">span: 8</fs-col>
</fs-row>

1
2
3
4
5

右对齐

<fs-row justify="flex-end">
  <fs-col span="6">span: 6</fs-col>
  <fs-col span="6">span: 6</fs-col>
  <fs-col span="6">span: 8</fs-col>
</fs-row>

1
2
3
4
5

两端对齐, 底部对齐

<fs-row justify="space-between" align="flex-end">
  <fs-col span="6" style="height: 40px;">span: 6</fs-col>
  <fs-col span="6" style="height: 60px;">span: 6</fs-col>
  <fs-col span="6" style="height: 50px;">span: 6</fs-col>
</fs-row>

1
2
3
4
5

两侧间隔相等, 居中对齐

<fs-row justify="space-around" align="center">
  <fs-col span="6" style="height: 40px;">span: 6</fs-col>
  <fs-col span="6" style="height: 60px;">span: 6</fs-col>
  <fs-col span="6" style="height: 50px;">span: 6</fs-col>
</fs-row>

1
2
3
4
5

offset

<fs-row>
  <fs-col span="6">span: 6</fs-col>
  <fs-col span="6" offset="10">span: 6</fs-col>
</fs-row>

1
2
3
4

自定义tag

<fs-row tag="ul">
  <fs-col span="12" tag="li">span: 12</fs-col>
  <fs-col span="12" tag="li">span: 12</fs-col>
</fs-row>

1
2
3
4

Row 属性

参数	说明	类型	默认值
tag	标签类型	String	'div'
type	display 类型	String	'flex'
justify	justify-content 属性	String	-
align	align-items 属性	String	-

Row 插槽

插槽名	说明
-	默认内容

Col 属性

参数	说明	类型	默认值
tag	标签类型	String	'div'
span	栅格的占位格数 1 - 24	String	-
offset	栅格左侧的间隔格数	String	-

Col 插槽

插槽名	说明
-	默认内容

← Grid 九宫格布局 Input 输入框 →