Flex Layout

Flexbox-based layout component, providing flexible control over direction, alignment, wrapping, and spacing. Deeply integrated with BrConfigProvider, supporting responsive properties and global theme configuration.

Basic Usage

Quickly build layouts using gap, justify, and align props.

Example

Vertical Layout

Set direction="col" to switch to vertical layout.

Example

Responsive Layout

Core props like direction, gap, justify, align support responsive object configuration. You can set different values for different breakpoints (sm, md, lg, xl, 2xl).

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

Item A

Item B

Item C

Example

Theming & Tokens

The gap prop of BrFlex supports referencing sizing tokens defined in BrConfigProvider. By configuring BrConfigProvider globally or locally, you can unify spacing standards.

In the following example, we define a sizing token named xl (paddingX: 4rem) and use it directly in BrFlex via gap="xl".

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

Example

API

BrFlex Props

Prop Name	Type	Default	Description
as	string	'div'	The HTML tag or component to render
direction	ResponsiveProp<FlexDirection>	'row'	Flex direction. Options: row, row-reverse, col, col-reverse
wrap	ResponsiveProp<FlexWrap>	'nowrap'	Flex wrap. Options: nowrap, wrap, wrap-reverse
justify	ResponsiveProp<FlexJustify>	'start'	Justify content. Options: start, end, center, between, around, evenly
align	ResponsiveProp<FlexAlign>	'start'	Align items. Options: start, end, center, baseline, stretch
gap	ResponsiveProp<string | number>	-	Gap spacing. Supports Tailwind numbers (e.g. '4') or ConfigProvider Tokens (e.g. 'md')
gapX	ResponsiveProp<string | number>	-	Horizontal gap
gapY	ResponsiveProp<string | number>	-	Vertical gap
grow	boolean	false	Whether to grow (flex-grow)
shrink	boolean	false	Whether to shrink (flex-shrink)
basis	string | number	-	Base size (flex-basis)

Type Explanation

ResponsiveProp<T>

Properties can be a direct value T, or an object containing breakpoints:

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

Example:

<!-- Simple value -->
<BrFlex direction="row" />

<!-- Responsive object -->
<BrFlex
  :direction="{ base: 'col', md: 'row' }"
  :gap="{ base: '2', lg: '4' }"
/>