Flex 布局

基于 Flexbox 的布局组件，提供对方向、对齐、换行和间距的灵活控制。深度集成 BrConfigProvider，支持响应式属性和全局主题配置。

基础用法

使用 gap, justify, 和 align 属性快速构建布局。

Example

垂直布局

设置 direction="col" 以切换到垂直布局。

Example

响应式布局

direction, gap, justify, align 等核心属性支持响应式对象配置。你可以为不同的断点（sm, md, lg, xl, 2xl）设置不同的值。

Mobile: Column & Small Gap | Tablet+: Row & Large Gap

Item A

Item B

Item C

Example

主题与 Token

BrFlex 的 gap 属性支持引用 BrConfigProvider 中定义的尺寸 Token。通过全局或局部配置 BrConfigProvider，你可以统一间距标准。

在下面的例子中，我们定义了一个名为 xl (paddingX: 4rem) 的尺寸 Token，并通过 gap="xl" 直接在 BrFlex 中使用。

Using global token 'xl' (defined as 4rem) for gap:

Example

API

BrFlex Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件
direction	ResponsiveProp<FlexDirection>	'row'	Flex 方向。可选值：row, row-reverse, col, col-reverse
wrap	ResponsiveProp<FlexWrap>	'nowrap'	Flex 换行。可选值：nowrap, wrap, wrap-reverse
justify	ResponsiveProp<FlexJustify>	'start'	主轴对齐。可选值：start, end, center, between, around, evenly
align	ResponsiveProp<FlexAlign>	'start'	交叉轴对齐。可选值：start, end, center, baseline, stretch
gap	ResponsiveProp<string | number>	-	间距。支持 Tailwind 数字（如 '4'）或 ConfigProvider Token（如 'md'）
gapX	ResponsiveProp<string | number>	-	水平间距
gapY	ResponsiveProp<string | number>	-	垂直间距
grow	boolean	false	是否放大 (flex-grow)
shrink	boolean	false	是否缩小 (flex-shrink)
basis	string | number	-	基础尺寸 (flex-basis)

类型说明

ResponsiveProp<T>

属性可以直接是值 T，或者是一个包含断点的对象：

type ResponsiveProp<T> = T | {
  base?: T
  sm?: T
  md?: T
  lg?: T
  xl?: T
  '2xl'?: T
  [key: string]: T | undefined
}

示例：

<!-- 简单值 -->
<BrFlex direction="row" />

<!-- 响应式对象 -->
<BrFlex
  :direction="{ base: 'col', md: 'row' }"
  :gap="{ base: '2', lg: '4' }"
/>