Flux

Appearance

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>