Return to top
On this page

Flex

The Flex component is a component for declaratively defining display: flex CSS layouts.

vue
<script setup lang="ts">
import { Flex, Button } from '@sigveh/basic-ui'
</script>

<template>
  <Flex justify="space-between">
    <Button theme="primary">Primary button</Button>
    <Button theme="secondary">Secondary button</Button>
    <Button theme="tertiary">Tertiary button</Button>
  </Flex>
</template>

Demo

justify="space-evenly"
justify="space-around"
justify="space-between"

Props

ts
interface FlexProps {
  align?: FlexAlignment
  justify?: FlexAlignment
  direction?: FlexDirection
  wrap?: FlexWrap
  gap?: string
}

type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'
type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
type FlexAlignment =
  | 'start'
  | 'center'
  | 'end'
  | 'stretch'
  | 'space-between'
  | 'space-around'
  | 'space-evenly'