Flex

Flex 是用于在垂直或水平方向排列元素的弹性容器组件。

Usage

Item 1

Item 2

Item 3

Item 1Item 2Item 3

gap 属性用于设置子元素之间的间距，可使用 Spaces 的 Tokens 和 Semantic Tokens。

align 属性用于控制子元素在主轴上的对齐方式。

Item 1

Item 2

Item 3

align 属性用于控制子元素在交叉轴上的对齐方式。

Item 1

Item 2

Item 3

Flex 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	Flex 的子元素。
className	ClassValue	-	用于根元素的 className。
inline	boolean	false	设置容器是否为 inline-display。
justify	CSSProperties['justifyContent']	-	设置子元素在主轴上的对齐方式。
align	CSSProperties['alignItems']	-	设置子元素在交叉轴上的对齐方式。
wrap	CSSProperties['wrap']	-	设置子元素单行显示还是多行显示。
direction	CSSProperties['flexDirection']	-	设置容器主轴的方向。
gap	CSSObject['gap']	-	设置子元素之间的间距。
ref	Ref	-	用于转发根元素。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。