Stacks 1.2.0

Kurzformen fuer Flex-Layouts: .velin-stack-v fuer vertikale Stacks und .velin-stack-h fuer horizontale Stacks mit automatischem Gap-Abstand. English: stacks

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Staple Kinder vertikal oder horizontal mit konsistenten Abstaenden, etwa fuer Formulargruppen oder kleine Toolbars.

Wann nicht verwenden

Nutze Stacks nicht, wenn eine semantische Liste oder Tabelle passender ist.

Vertikaler Stack

Erstes Element

Zweites Element

Drittes Element

<div class="velin-stack-v">
  <div class="velin-p-2 border rounded">Erstes Element</div>
  <div class="velin-p-2 border rounded">Zweites Element</div>
  <div class="velin-p-2 border rounded">Drittes Element</div>
</div>

Horizontaler Stack

Links

Mitte

Rechts (Auto-Margin)

<div class="velin-stack-h">
  <div class="velin-p-2 border rounded">Links</div>
  <div class="velin-p-2 border rounded">Mitte</div>
  <div class="velin-p-2 border rounded ms-auto">Rechts</div>
</div>