Flux

Flex ​

A primitive layout component that maps directly to CSS flexbox. Use it to compose any flex layout (horizontal or vertical, wrapping or not) with full control over alignment and justification.

One
Two
Three

TIP

For controlling individual children inside a FluxFlex container (like making one child grow or shrink), use FluxFlexItem.

Props

align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
The alignment of the elements on the cross axis (`align-items`).

direction?: 'horizontal' | 'vertical'
The direction in which the elements flow.
Default: horizontal

gap?: number
The gap between each element in pixels.

is-inline?: boolean
If true, the flex container uses `inline-flex` instead of `flex`.

justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
The alignment of the elements on the main axis (`justify-content`).

tag?: keyof HTMLElementTagNameMap
The HTML tag to use for the flex container.
Default: div

wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
If and how the elements should wrap.
Default: nowrap

Slots

default
The content of the flex container.

Available variants ​

  • Item (for controlling individual children inside a flex container)

Stack ​

Specialised flex containers for stacking specific kinds of content:

Examples ​

Horizontal

A horizontal flex container.

One
Two
Three

<template>
    <FluxFlex :gap="9">
        <PreviewColumn>One</PreviewColumn>
        <PreviewColumn>Two</PreviewColumn>
        <PreviewColumn>Three</PreviewColumn>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
</script>

Vertical

A vertical flex container.

One
Two
Three

<template>
    <FluxFlex
        direction="vertical"
        :gap="9">
        <PreviewColumn>One</PreviewColumn>
        <PreviewColumn>Two</PreviewColumn>
        <PreviewColumn>Three</PreviewColumn>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
</script>

Align and justify

Combine align and justify to center content on both axes.

Centered
Both axes

<template>
    <FluxFlex
        align="center"
        :gap="9"
        justify="center"
        style="height: 180px; width: 100%">
        <PreviewColumn>Centered</PreviewColumn>
        <PreviewColumn>Both axes</PreviewColumn>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
</script>

Wrapping

Use wrap to allow children to flow onto multiple lines.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

<template>
    <FluxFlex
        :gap="9"
        wrap="wrap">
        <PreviewColumn
            v-for="i in 12"
            :key="i">
            Item {{ i }}
        </PreviewColumn>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
</script>