Flex

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

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>

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>

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>

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>