Flux

Appearance

Flex item ​

A transparent helper for controlling the flex-grow, flex-shrink, and flex-basis of a child within a FluxFlex container. When you pass a single child, FluxFlexItem does not introduce an extra DOM element; the flex styles are merged onto the child directly.

Fixed
Grows
Fixed

Props

basis?: number | string
The initial main size of the flex item. A number is treated as pixels; a string is used as-is.

grow?: number
The flex-grow factor.

shrink?: number
The flex-shrink factor.

Slots

default
The content of the flex item. When a single child is provided, no wrapper element is rendered — the flex styles are applied directly to that child. When multiple children are provided, they are wrapped in a `div`.

Examples ​

Grow

Use `grow` to let an item take up the remaining space.

A
B (grow=1)
C (grow=2)

<template>
    <FluxFlex :gap="9">
        <PreviewColumn>A</PreviewColumn>

        <FluxFlexItem :grow="1">
            <PreviewColumn>B (grow=1)</PreviewColumn>
        </FluxFlexItem>

        <FluxFlexItem :grow="2">
            <PreviewColumn>C (grow=2)</PreviewColumn>
        </FluxFlexItem>
    </FluxFlex>
</template>

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

Basis

Set an explicit `basis` to control the initial size of an item.

80px
Grows to fill
25%

<template>
    <FluxFlex :gap="9">
        <FluxFlexItem :basis="80">
            <PreviewColumn>80px</PreviewColumn>
        </FluxFlexItem>

        <FluxFlexItem :grow="1">
            <PreviewColumn>Grows to fill</PreviewColumn>
        </FluxFlexItem>

        <FluxFlexItem basis="25%">
            <PreviewColumn>25%</PreviewColumn>
        </FluxFlexItem>
    </FluxFlex>
</template>

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