---
name: Stack
description: Onesown Blazor Komponente Stack (FlexGrid). Verwende diesen Skill wenn du die Stack-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Stack

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** FlexGrid  
**Basisklasse:** `OoComponentBase`  

Universeller Flex-Container für horizontale oder vertikale Layouts. Kombiniert Orientation, AlignItems, JustifyContent, Wrap, Gap und StretchItems zu einem einzigen, kompakten Layout-Baustein ohne manuelles CSS.

**Live-Demo:** https://components.schini.com/demo/stack  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Orientation`` | ``OoOrientation`` | ``OoOrientation.Horizontal`` | Ausrichtung der Kinder. Horizontal (Standard) = Zeile, Vertical = Spalte. |
| ``AlignItems`` | ``OoAlignItems`` | ``OoAlignItems.Normal`` | Vertikale Ausrichtung der Kindelemente (CSS align-items). Mögliche Werte: Normal, Start, Center, End, Stretch, Baseline. Standard: Normal. |
| ``JustifyContent`` | ``OoJustifyContent`` | ``OoJustifyContent.Normal`` | Horizontale Verteilung der Kindelemente (CSS justify-content). Mögliche Werte: Normal, Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly, Stretch. Standard: Normal. |
| ``Wrap`` | ``OoWrap`` | ``OoWrap.NoWrap`` | Umbruchverhalten der Kindelemente (CSS flex-wrap). NoWrap (Standard) = erzwingt eine Zeile; Wrap = umbricht automatisch; WrapReverse = umbricht in umgekehrter Richtung. |
| ``StretchItems`` | ``OoStretchItems`` | ``OoStretchItems.None`` | Steuert, welche direkten Kinder gestreckt werden (flex:1). None = kein Strecken (Standard); Start = erstes Kind; End = letztes Kind; All = alle; Middle = alle außer erstem/letztem. |
| ``Gap`` | ``string`` | ``OoSpace.S2`` | Abstand zwischen den Kindelementen – akzeptiert jeden gültigen CSS-Wert (z. B. "0.5rem", "8px") oder -Token (z. B. @OoGaps.S4). Standard: . |
| ``ChildContent`` | ``RenderFragment`` |  | Inhalt des Stack-Containers. Nimmt beliebige Kindelemente entgegen. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Horizontal-Layout (Standard): Orientation="OoOrientation.Horizontal" reiht Kinder nebeneinander auf
- Vertikal-Layout: Orientation="OoOrientation.Vertical" stapelt Kinder übereinander (ersetzt div+flex-column)
- Umbrechen: Wrap="OoWrap.Wrap" bricht bei zu wenig Platz automatisch in neue Zeilen um
- Abstände: Gap="@OoSpace.S4" oder beliebiger CSS-Wert; Standard ist OoSpace.S2 (0.5rem)
- Ein Kind strecken: StretchItems="OoStretchItems.End" gibt dem letzten Kind flex:1 (rechtsbündiger Push)
- Alle Kinder gleichmäßig verteilen: JustifyContent="OoJustifyContent.SpaceBetween"
- Vertikal zentrieren: AlignItems="OoAlignItems.Center"