Skip to main content
Version: 9.1

Layout

Flex​

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

Enable flex behaviors​

I am a Flex container.
<div class="hf-flex"></div>

Direction​

Item 1
Item 2
Item 3
<div class="hf-flex flex-row"></div>
Item 1
Item 2
Item 3
<div class="hf-flex flex-column"></div>

Grow​

Item .flex-1
Item .flex-2
Item .flex-3
<div class="flex-1"></div>
<div class="flex-2"></div>
<div class="flex-3"></div>

Shrink​

Item .flex-1-shrink
Item .flex-2-shrink
Item .flex-3-shrink
<div class="flex-1-shrink"></div>
<div class="flex-2-shrink"></div>
<div class="flex-3-shrink"></div>

Auto​

Item .flex-1-auto
Item .flex-2-auto
Item .flex-3-auto
<div class="flex-1-auto"></div>
<div class="flex-2-auto"></div>
<div class="flex-3-auto"></div>

Justify Content​

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="hf-flex justify-content-start"></div>
<div class="hf-flex justify-content-end"></div>
<div class="hf-flex justify-content-center"></div>

Align Items​

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="hf-flex align-items-start"></div>
<div class="hf-flex align-items-end"></div>
<div class="hf-flex align-items-center"></div>

Align Self​

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="align-self-start"></div>
<div class="align-self-end"></div>
<div class="align-self-center"></div>

Float​

Toggle floats on any element, across any breakpoint, using the responsive float utilities.

Item
Item
<div class="hf-float-left"></div>
<div class="hf-float-right"></div>

Display​

Quickly toggle the display value of components.

<div class="hf-hide"></div>
<div class="hf-show"></div>

Hide elements if the form has only one column (mobile devices).

Hidden at portrait
<div class="hf-hide-portrait"></div>