Flex 1.2.0

Steuere Layout, Ausrichtung und Groessenverhalten von Grid-Spalten, Navigation, Komponenten und mehr mit responsiven Flexbox-Utilities. English: Flex

Benennung: Nutze die Modifier-Form velin-flex--col, velin-flex--items-center, velin-flex--wrap — not velin-flex-col / velin-items-center. Tote Klassen sind haeufige Blueprint-Drift; pruefe mit velinstyle blueprint --strict.

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Studio und die vollstaendige Utility Engine bleiben geplant — ausgelieferte Utilities werden manuell unter @layer utilities, kein vollstaendiger Variantengenerator.

Wann verwenden

Baue eindimensionale Layouts mit Utilities fuer Flex-Richtung, Umbruch, Gap, Ausrichtung und Verteilung.
Kombiniere mit responsiven .velin-{bp}-flex / justify utilities.

Wann nicht

Bevorzuge CSS Grid (Grid) fuer zweidimensionale Track-Layouts.

Richtung

<div class="velin-d-flex velin-flex-row">Row (default)</div>
<div class="velin-d-flex velin-flex-row-reverse">Row reverse</div>
<div class="velin-d-flex velin-flex-column">Column</div>
<div class="velin-d-flex velin-flex-column-reverse">Column reverse</div>

<!-- Responsive: column on mobile, row on md+ -->
<div class="velin-d-flex velin-flex-column velin-flex-md-row">...</div>

Zeile (Standard)

Zeile umgekehrt

Spalte

Spalte umgekehrt

...

Umbruch

<div class="velin-d-flex velin-flex-nowrap">No wrap</div>
<div class="velin-d-flex velin-flex-wrap">Wrap</div>
<div class="velin-d-flex velin-flex-wrap-reverse">Wrap reverse</div>

Kein Umbruch

Umbruch

Umbruch reverse

Justify Content

<div class="velin-d-flex velin-justify-content-start">...</div>
<div class="velin-d-flex velin-justify-content-end">...</div>
<div class="velin-d-flex velin-justify-content-center">...</div>
<div class="velin-d-flex velin-justify-content-between">...</div>
<div class="velin-d-flex velin-justify-content-around">...</div>
<div class="velin-d-flex velin-justify-content-evenly">...</div>

...

Align Items

<div class="velin-d-flex velin-align-items-start">...</div>
<div class="velin-d-flex velin-align-items-end">...</div>
<div class="velin-d-flex velin-align-items-center">...</div>
<div class="velin-d-flex velin-align-items-baseline">...</div>
<div class="velin-d-flex velin-align-items-stretch">...</div>

...

Align Self

<div class="velin-align-self-start">...</div>
<div class="velin-align-self-end">...</div>
<div class="velin-align-self-center">...</div>
<div class="velin-align-self-baseline">...</div>
<div class="velin-align-self-stretch">...</div>

...

Wachsen & Schrumpfen

<div class="velin-flex-grow-0">Don't grow</div>
<div class="velin-flex-grow-1">Grow to fill</div>
<div class="velin-flex-shrink-0">Don't shrink</div>
<div class="velin-flex-shrink-1">Allow shrink</div>

Nicht wachsen

Zum Fuellen wachsen

Nicht schrumpfen

Schrumpfen erlauben

Reihenfolge

Sortiere Flex-Items visuell um mit .velin-order-{0-5|first|last}:

<div class="velin-order-3">Third visually</div>
<div class="velin-order-1">First visually</div>
<div class="velin-order-2">Second visually</div>

Visuell drittes

Visuell erstes

Visuell zweites