BreezeUI
  • English

    • 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.

    Component Features

    • 📐 Direction Control: Controls main axis direction via direction prop (horizontal/vertical).
    • ↔️ Alignment Control: Controls alignment via justify and align props.
    • 🔄 Wrap Control: Controls wrapping via wrap prop.
    • 📏 Gap Control: Controls spacing between elements via gap prop.
    • 📱 Responsive Layout: direction, gap, justify, align core props support responsive object config.
    • 🎨 Size Tokens: Supports referencing BrConfigProvider size tokens.
    • 🌓 Dark Mode: Based on BrConfigProvider for automatic dark mode adaptation.

    Basic Usage

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

    <script setup lang="ts">
import { BrFlex, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrFlex gap="4" justify="center" align="center" class="bg-secondary/20 p-8 rounded-lg border border-border">
    <BrButton variant="outline">Item 1</BrButton>
    <BrButton variant="outline">Item 2</BrButton>
    <BrButton variant="outline">Item 3</BrButton>
  </BrFlex>
</template>

    Vertical Layout

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

    <script setup lang="ts">
import { BrFlex, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrFlex direction="col" gap="4" align="stretch" class="max-w-xs mx-auto border border-dashed border-border p-4 rounded-md">
    <BrButton class="w-full">Top Item</BrButton>
    <BrButton variant="secondary" class="w-full">Middle Item</BrButton>
    <BrButton variant="outline" class="w-full">Bottom Item</BrButton>
  </BrFlex>
</template>

    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).

    <script setup lang="ts">
import { BrFlex } from '@breezeui/vue'
</script>

<template>
  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">Mobile: Column & Small Gap | Tablet+: Row & Large Gap</p>
    <BrFlex 
      :direction="{ base: 'col', sm: 'row' }" 
      :gap="{ base: '2', md: '8' }"
      align="center"
      justify="between" 
      class="bg-muted p-6 rounded-md"
    >
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item A</div>
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item B</div>
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item C</div>
    </BrFlex>
  </div>
</template>

    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".

    <script setup lang="ts">
import { BrFlex, BrConfigProvider, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrConfigProvider :sizing="{ xl: { paddingX: '4rem' } }">
    <div class="space-y-4">
      <p class="text-sm text-muted-foreground">Using global token 'xl' (defined as 4rem) for gap:</p>
      <BrFlex gap="xl" wrap="wrap" class="bg-accent/10 p-4 rounded-lg border border-accent/20">
        <BrButton>Item 1</BrButton>
        <BrButton>Item 2</BrButton>
        <BrButton>Item 3</BrButton>
      </BrFlex>
    </div>
  </BrConfigProvider>
</template>

    API

    BrFlex Props

    Prop NameTypeDefaultDescription
    asstring'div'The HTML tag or component to render
    directionResponsiveProp<FlexDirection>'row'Flex direction. Options: row, row-reverse, col, col-reverse
    wrapResponsiveProp<FlexWrap>'nowrap'Flex wrap. Options: nowrap, wrap, wrap-reverse
    justifyResponsiveProp<FlexJustify>'start'Justify content. Options: start, end, center, between, around, evenly
    alignResponsiveProp<FlexAlign>'start'Align items. Options: start, end, center, baseline, stretch
    gapResponsiveProp<string | number>-Gap spacing. Supports Tailwind numbers (e.g. '4') or ConfigProvider Tokens (e.g. 'md')
    gapXResponsiveProp<string | number>-Horizontal gap
    gapYResponsiveProp<string | number>-Vertical gap
    growbooleanfalseWhether to grow (flex-grow)
    shrinkbooleanfalseWhether to shrink (flex-shrink)
    basisstring | 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' }"
/>