Flex 1.2.2

Manage layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. Deutsch: Flex

Naming: use modifier form velin-flex--col, velin-flex--items-center, velin-flex--wrap — not velin-flex-col / velin-items-center. Dead classes are a common blueprint drift; gate with velinstyle blueprint --strict.

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Build one-dimensional layouts with flex direction, wrap, gap, align, and justify utilities.
Pair with responsive .velin-{bp}-flex / justify utilities.

When not

Prefer CSS Grid (Grid) for two-dimensional track layouts.

Direction

<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>

Row (default)

Row reverse

Column

Column reverse

...

Wrap

<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>

No wrap

Wrap

Wrap 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>

...

Grow & Shrink

<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>

Don't grow

Grow to fill

Don't shrink

Allow shrink

Order

Reorder flex items visually using .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>

Third visually

First visually

Second visually