Flex utilities#

Flex utilities are used for making working with flex easier.

<!-- Flex direction -->
<div class="flex-row"></div>
<div class="flex-row-reverse"></div>
<div class="flex-column"></div>
<div class="flex-column-reverse"></div>

<!-- Flex wrap -->
<div class="flex-nowrap"></div>
<div class="flex-wrap"></div>
<div class="flex-wrap-reverse"></div>

<!-- Justify content -->
<div class="justify-end"></div>
<div class="justify-start"></div>
<div class="justify-center"></div>
<div class="justify-space-around"></div>
<div class="justify-space-between"></div>

<!-- Align items -->
<div class="align-start"></div>
<div class="align-center"></div>
<div class="align-end"></div>
<div class="align-stretch"></div>
<div class="align-baseline"></div>

<!-- Flex grow -->
<div class="flex-grow-0"></div>
<div class="flex-grow-1"></div>

<!-- Flex shrink -->
<div class="flex-shrink-0"></div>
<div class="flex-shrink-1"></div>


<!-- Flex basis -->
<div class="flex-basis-auto"></div>
<div class="flex-basis-0"></div>

<!-- Align self -->
<div class="align-self-auto"></div>
<div class="align-self-start"></div>
<div class="align-self-center"></div>
<div class="align-self-end"></div>
<div class="align-self-stretch"></div>
<div class="align-self-baseline"></div>