1. Docs
  2. Utilities
  3. Flex
Buy Now Contact

Flex Utilities

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

This is a flex container
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

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