跳到正文
raft-ui
EN

Flex 弹性布局

Flex 把子元素排成一行或一列，元素之间留出均匀的间距。几档预设间距来自主题，工具栏、表单行这类地方就能和页面其他部分保持同样的节奏。它只负责布局，自己不画任何东西。

演示

基础用法

默认是一行，放不下时自动换行，间距为 medium。

竖排与反向

vertical 把元素竖着排成一列；reverse 在横竖两个方向上都能把顺序倒过来。

vertical

1
2
3

vertical reverse

1
2
3

reverse

1
2
3

间距

size 可以是主题预设（small、medium、large），可以是一个数字（单位 px，横竖通用），也可以是 [水平, 垂直]（单位 px）。

size="small"

1
2
3
4
5
6
7
8

size="medium"

1
2
3
4
5
6
7
8

size="large"

1
2
3
4
5
6
7
8

size={24}

1
2
3
4
5
6
7
8

size={[32, 4]}

1
2
3
4
5
6
7
8

主轴与交叉轴对齐

justify 决定元素沿行方向怎么分布，align 决定它们在另一个方向上怎么对齐。换几种组合，看看高矮不同的元素怎么排。

justify
align
1
2
3
4

换行

元素默认会换行。设置 wrap={false} 后始终保持一行，这个例子里的元素允许收窄来挤进一行。竖排时不会换行。

wrap (default)

1
2
3
4
5
6
7
8

wrap={false}

1
2
3
4
5
6
7
8

行内

inline 让容器变成 inline-flex，一小组元素可以直接放在一行文字中间。

Pick an action
and keep reading on the same line.

Props

名称类型默认值说明版本
sizesmall | medium | large | number | [number, number]medium元素之间的间距：主题预设、横竖通用的 px 值，或 [水平, 垂直]（px）。未发布
justifystart | end | center | flex-start | flex-end | space-between | space-around | space-evenlystart元素沿主轴的分布方式（justify-content）。未发布
alignstart | end | center | baseline | stretchundefined元素在交叉轴上的对齐方式（align-items）。不设时沿用 CSS 默认值，即拉伸。未发布
verticalbooleanfalse竖着排成一列。未发布
reversebooleanfalse倒转元素的顺序。未发布
wrapbooleantrue一行放不下时换行。vertical 时不生效。未发布
inlinebooleanfalse用 inline-flex 代替 flex。未发布
childrenReactNodeundefined要排列的元素。没有子元素时，Flex 什么都不渲染。未发布

Flex 渲染一个 div，同样接受原生 div 属性和 ref。它不附带任何 role；如果里面的元素是一组，比如几个相关的操作，给它加上 role="group" 和 aria-label。

预设间距对应主题 token --r-flex-gap-small、--r-flex-gap-medium 和 --r-flex-gap-large，每个都是一个 CSS gap 值（先行距，后列距）。