BeeFlex

A flexbox container to align and space items, with an automatic switch to a column on small screens.

import { BeeFlex } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Usage

Items go in the default slot. By default they are centered, spaced by lg, and wrap to the next line when there is not enough room.

First

Second

Third

<script setup lang="ts">
import { BeeCard, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex>
    <BeeCard>First</BeeCard>
    <BeeCard>Second</BeeCard>
    <BeeCard>Third</BeeCard>
  </BeeFlex>
</template>

Justify

The justify prop sets the distribution along the main axis.

flex-start

OneTwoThree

center

OneTwoThree

flex-end

OneTwoThree

space-between

OneTwoThree

<script setup lang="ts">
import { BeeFlex, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['flex-start', 'center', 'flex-end', 'space-between'] as const" :key="value">
      <code>{{ value }}</code>
      <BeeFlex :justify="value" :gap="8" class="frame">
        <BeeTag>One</BeeTag>
        <BeeTag>Two</BeeTag>
        <BeeTag>Three</BeeTag>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px dashed var(--bd-color-border-strong);
  border-radius: var(--bd-radius-sm);
}
</style>

Align

The align prop sets the alignment along the cross axis.

flex-start

A

B

C

center

A

B

C

flex-end

A

B

C

stretch

A

B

C

<script setup lang="ts">
import { BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['flex-start', 'center', 'flex-end', 'stretch'] as const" :key="value">
      <code>{{ value }}</code>
      <BeeFlex :align="value" justify="flex-start" :gap="8" :responsive="false" class="frame">
        <div class="box" style="height: 2rem">A</div>
        <div class="box" style="height: 3.5rem">B</div>
        <div class="box">C</div>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px dashed var(--bd-color-border-strong);
  border-radius: var(--bd-radius-sm);
}

.box {
  min-width: 3rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bd-radius-sm);
  background: var(--bd-color-primary-light);
  color: var(--bd-color-primary-dark);
  text-align: center;
}
</style>

Gap

The gap prop accepts a keyword (none, sm, md, lg) tied to the spacing tokens, or a number in pixels.

gap="none"

OneTwoThree

gap="sm"

OneTwoThree

gap="md"

OneTwoThree

gap="lg"

OneTwoThree

:gap="48"

OneTwoThree

<script setup lang="ts">
import { BeeFlex, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['none', 'sm', 'md', 'lg', 48] as const" :key="value">
      <code>{{ typeof value === "number" ? `:gap="${value}"` : `gap="${value}"` }}</code>
      <BeeFlex :gap="value" justify="flex-start" :responsive="false" class="frame">
        <BeeTag>One</BeeTag>
        <BeeTag>Two</BeeTag>
        <BeeTag>Three</BeeTag>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
}
</style>

Direction

With direction="column", items stack vertically.

<script setup lang="ts">
import { BeeButton, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex direction="column" align="flex-start" :gap="12" :responsive="false">
    <BeeButton>Save</BeeButton>
    <BeeButton variant="secondary">Cancel</BeeButton>
    <BeeButton variant="ghost">Learn more</BeeButton>
  </BeeFlex>
</template>

Responsive

By default, below 768px wide, the container switches to a column and centers its items. Turn this off with :responsive="false".

Stacked below 768px

Resize the window

to see the difference

<script setup lang="ts">
import { BeeCard, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex>
    <BeeCard>Stacked below 768px</BeeCard>
    <BeeCard>Resize the window</BeeCard>
    <BeeCard>to see the difference</BeeCard>
  </BeeFlex>
</template>

API

Props

Name	Type	Default	Description
justify	"flex-start" | "flex-end" | "center" | "space-between"	"center"	Distribution along the main axis.
align	"flex-start" | "flex-end" | "center" | "stretch"	"center"	Alignment along the cross axis.
direction	"row" | "column"	"row"	Direction of the main axis.
gap	"none" | "sm" | "md" | "lg" | number	"lg"	Spacing. A number is in pixels.
responsive	boolean	true	Switches to a centered column below 768px.

Slots

Name	Description
default	Items to lay out.

CSS variables used

--bd-space-sm, --bd-space-md, --bd-space-lg.