Flex Utilities

Utilize the power of flexbox to build a wide range of complex layouts.

This is a flex container

<div class="u-flex">
    This is a flex container
</div>

<div class="u-inline-flex">
    This is an inline flex container
</div>

Justify Content

Used on flexbox containers to change the alignment of flex items.

Flex item

<div class="u-flex u-justify-start">...</div>
<div class="u-flex u-justify-end">...</div>
<div class="u-flex u-justify-center">...</div>
<div class="u-flex u-justify-between">...</div>
<div class="u-flex u-justify-around">...</div>

Align items

Used on flexbox containers to change the alignment of flex items on the cross axis.

Flex item


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

Flex Wrap

Used on flexbox containers to change how flex items wrap in its flex container.

Flex item


<div class="u-flex u-flex-wrap">...</div>
<div class="u-flex u-flex-nowrap">...</div>