Flex container and item utilities. Direction, wrap, justify, align, gap, grow, shrink, order.
Direction, wrap, and alignment combinations.
flex + justify-between + items-center
flex-col + gap-2
<div class="flex justify-between items-center">...</div>
<div class="flex flex-col gap-2">...</div>
<div class="flex flex-wrap gap-4">...</div>
<div class="flex items-center justify-center">...</div>
<!-- Antsand-prefixed -->
<div class="antsand-flex antsand-flex-between">...</div>
<div class="antsand-flex antsand-flex-col">...</div>
<div class="antsand-flex antsand-flex-center">...</div>
<div class="antsand-flex antsand-flex-wrap">...</div>Grow, shrink, order, and self-alignment.
<div class="flex-1">Grows to fill</div>
<div class="flex-none">Fixed size</div>
<div class="flex-auto">Grows from content</div>
<div class="flex-initial">Shrinks only</div>
<div class="flex-grow">Always grow</div>
<div class="flex-shrink">Always shrink</div>
<!-- Order -->
<div class="order-first">First</div>
<div class="order-last">Last</div>
<div class="order-1">Order 1</div>