Basic usage

Default row direction with items distributed by gap.

<BOBFlexStack Gap="1rem">
    <BOBButton Text="First" />
    <BOBButton Text="Second" />
    <BOBButton Text="Third" />
</BOBFlexStack>

Vertical stack

Set Direction to Column for a vertical layout.

<BOBFlexStack Direction="FlexStackDirection.Column" Gap="0.5rem">
    <BOBButton Text="Item 1" />
    <BOBButton Text="Item 2" />
    <BOBButton Text="Item 3" />
</BOBFlexStack>

Alignment

Combine JustifyContent and AlignItems to position items within the container.

<BOBFlexStack Direction="FlexStackDirection.Row"
              JustifyContent="FlexStackJustifyContent.SpaceBetween"
              AlignItems="FlexStackAlignItems.Center"
              Gap="0.5rem"
              P="1rem"
              BackgroundColor="color-mix(in oklab, var(--palette-primary) 6%, transparent)"
              style="min-height: 6rem; border-radius: 0.5rem;">
    <BOBButton Text="Start" />
    <BOBButton Text="Center" />
    <BOBButton Text="End" />
</BOBFlexStack>

Background color

Set a theme-aware or custom background color using the BackgroundColor parameter.

<BOBFlexStack Gap="1rem">
    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-primary)"
                  Color="var(--palette-primary-contrast)"
                  style="border-radius: 0.5rem;">
        <BOBButton Text="Primary" />
        <BOBButton Text="Stack" />
    </BOBFlexStack>

    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-secondary)"
                  Color="var(--palette-secondary-contrast)"
                  style="border-radius: 0.5rem;">
        <BOBButton Text="Secondary" />
        <BOBButton Text="Stack" />
    </BOBFlexStack>
</BOBFlexStack>

Border & radius

Apply borders and rounded corners with the Border parameter.

<BOBFlexStack Gap="1rem">
    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-surface)"
                  Border="@(BorderStyle.Create().All("1px", BorderStyleType.Solid, "var(--palette-border)").Radius(8))">
        <BOBButton Text="Rounded" />
        <BOBButton Text="Border" />
    </BOBFlexStack>

    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-surface)"
                  Border="@(BorderStyle.Create().Top("3px", BorderStyleType.Solid, "var(--palette-primary)").Radius(4))">
        <BOBButton Text="Top accent" />
        <BOBButton Text="Border" />
    </BOBFlexStack>
</BOBFlexStack>

Shadow

Add elevation with the Shadow parameter.

<BOBFlexStack Gap="1rem">
    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-surface)"
                  Border="@(BorderStyle.Create().All("1px", BorderStyleType.Solid, "var(--palette-border)").Radius(8))"
                  Shadow="@(ShadowStyle.Create(2, 4))">
        <BOBButton Text="Elevation 1" />
        <BOBButton Text="Stack" />
    </BOBFlexStack>

    <BOBFlexStack Gap="0.5rem"
                  P="1rem"
                  BackgroundColor="var(--palette-surface)"
                  Border="@(BorderStyle.Create().All("1px", BorderStyleType.Solid, "var(--palette-border)").Radius(8))"
                  Shadow="@(ShadowStyle.Create(6, 12))">
        <BOBButton Text="Elevation 2" />
        <BOBButton Text="Stack" />
    </BOBFlexStack>
</BOBFlexStack>

Gaps & spacing

Control row and column gaps independently, and add padding or margin.

<BOBFlexStack RowGap="2rem" ColumnGap="0.5rem" P="1rem" BackgroundColor="color-mix(in oklab, var(--palette-primary) 6%, transparent)" style="border-radius: 0.5rem;">
    <BOBButton Text="A" />
    <BOBButton Text="B" />
    <BOBButton Text="C" />
    <BOBButton Text="D" />
    <BOBButton Text="E" />
    <BOBButton Text="F" />
</BOBFlexStack>

Wrap behavior

Control whether items wrap to new lines when they overflow the container.

<BOBFlexStack Gap="0.5rem" Wrap="FlexStackWrap.NoWrap" style="max-width: 20rem; overflow: auto; background: color-mix(in oklab, var(--palette-primary) 6%, transparent); border-radius: 0.5rem; padding: 0.5rem;">
    <BOBButton Text="NoWrap" />
    <BOBButton Text="Item 2" />
    <BOBButton Text="Item 3" />
    <BOBButton Text="Item 4" />
    <BOBButton Text="Item 5" />
</BOBFlexStack>

Properties

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Content rendered inside the component.
`Direction`	`FlexStackDirection`	`FlexStackDirection.Row`	Direction.
`Wrap`	`FlexStackWrap`	`FlexStackWrap.Wrap`	Wrap.
`JustifyContent`	`FlexStackJustifyContent`	`FlexStackJustifyContent.Start`	JustifyContent.
`AlignItems`	`FlexStackAlignItems`	`FlexStackAlignItems.Stretch`	AlignItems.
`AlignContent`	`FlexStackAlignContent`	`FlexStackAlignContent.Stretch`	AlignContent.
`Gap`	`string?`		Gap.
`RowGap`	`string?`		RowGap.
`ColumnGap`	`string?`		ColumnGap.
`P`	`string?`		P.
`Pt`	`string?`		Pt.
`Pr`	`string?`		Pr.
`Pb`	`string?`		Pb.
`Pl`	`string?`		Pl.
`Px`	`string?`		Px.
`Py`	`string?`		Py.
`M`	`string?`		M.
`Mt`	`string?`		Mt.
`Mr`	`string?`		Mr.
`Mb`	`string?`		Mb.
`Ml`	`string?`		Ml.
`Mx`	`string?`		Mx.
`My`	`string?`		My.
`FullWidth`	`bool`		When , the component spans the full width of its container.
`BackgroundColor`	`string?`		Background color of the stack. Accepts any valid CSS color value.
`Border`	`BorderStyle?`		Border style applied to the stack edge.
`Shadow`	`ShadowStyle?`		Shadow style applied to the stack surface.
`Color`	`string?`		Text color of the stack. Accepts any valid CSS color value.