Skip to main content
Figuration v3 Preview Available!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Flexbox

Visually align and re-order your content with the power of flexbox.

Contents

Flexbox Alignment

Flexbox makes horizontal and vertical alignment easier with the CSS properties align-content, align-self, and justify-content. Figuration provides some utility classes for these properties, which work with any flexbox enabled component.

It is important to understand the parent-child relationship created with flexbox. An element with display: flex; is a flex parent, and can horizontally or vertically align its children. All immediate children of the flex parent are flex children. A flex child can vertically align itself.

A simple example, using the grid layout, shows the .row as a flex parent, and the .col-*s as flex children.

<div class="row row-flex">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>

Vertical Alignment

Vertical alignment can be applied to a flex parent—which will align all the children automatically—or to a flex child which will align only that element.

To set the parent alignment, the available classes, per breakpoint, are:

  • .flex{-breakpoint}-top
  • .flex{-breakpoint}-middle
  • .flex{-breakpoint}-bottom
  • .flex{-breakpoint}-stretch - this is the default alignment
.flex-*-top
1 of 3
Align top - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
.flex-*-middle
1 of 3
Align middle - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
.flex-*-bottom
1 of 3
Align bottom - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
.flex-*-stretch
1 of 3
Equal height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
<div class="row row-flex flex-top">
    <div class="col">
        <code>.flex-*-top</code>
    </div>
    <div class="col">
        1 of 3
    </div>
    <div class="col">
        Align top - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
    </div>
</div>

<div class="row row-flex flex-middle">
    <div class="col">
        <code>.flex-*-middle</code>
    </div>
    <div class="col">
        1 of 3
    </div>
    <div class="col">
        Align middle - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
    </div>
</div>

<div class="row row-flex flex-bottom">
    <div class="col">
        <code>.flex-*-bottom</code>
    </div>
    <div class="col">
        1 of 3
    </div>
    <div class="col">
        Align bottom - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
    </div>
</div>

<div class="row row-flex flex-stretch">
    <div class="col">
        <code>.flex-*-stretch</code>
    </div>
    <div class="col">
        1 of 3
    </div>
    <div class="col">
        Equal height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor felis pretium!
    </div>
</div>

To align an individual child, we use the same alignment terms as the flex parent classes, but the child specific ones start with .flex-self-* instead of .flex-*.

To set the child alignment, the available classes, per breakpoint, are:

  • .flex-self{-breakpoint}-top
  • .flex-self{-breakpoint}-middle
  • .flex-self{-breakpoint}-bottom
  • .flex-self{-breakpoint}-stretch - this is the default alignment
align top
align middle
align bottom
align stretch
<div class="row row-flex">
    <div class="col flex-self-top">
        align top
    </div>
    <div class="col flex-self-middle">
        align middle
    </div>
    <div class="col flex-self-bottom">
        align bottom
    </div>
    <div class="col flex-self-stretch">
        align stretch
    </div>
</div>

Horizontal Alignment

Horizontal alignment classes are applied to the flex parent.

To set the alignment, the available classes, per breakpoint, are:

  • .flex-{breakpoint}-left - this is the default alignment
  • .flex-{breakpoint}-center
  • .flex-{breakpoint}-right
  • .flex-{breakpoint}-around
  • .flex-{breakpoint}-between
aligned to
the left
aligned to
the center
aligned to
the right
aligned to
the space around
aligned to
the space between
<div class="row row-flex flex-left">
    <div class="col-4">
        aligned to
    </div>
    <div class="col-4">
        the left
    </div>
</div>

<div class="row row-flex flex-center">
    <div class="col-4">
        aligned to
    </div>
    <div class="col-4">
        the center
    </div>
</div>

<div class="row row-flex flex-right">
    <div class="col-4">
        aligned to
    </div>
    <div class="col-4">
        the right
    </div>
</div>

<div class="row row-flex flex-around">
    <div class="col-4">
        aligned to
    </div>
    <div class="col-4">
        the space around
    </div>
</div>

<div class="row row-flex flex-between">
    <div class="col-4">
        aligned to
    </div>
    <div class="col-4">
        the space between
    </div>
</div>

Ordering

Quickly change the visual order of your flexbox items.

The available classes, per breakpoint, are:

  • .flex-{breakpoint}-first
  • .flex-{breakpoint}-last
  • .flex-{breakpoint}-unordered
1
2
3
4
5
<div class="row row-flex">
    <div class="col-1 flex-last">
        1
    </div>
    <div class="col-1 flex-unordered">
        2
    </div>
    <div class="col-1 flex-last">
        3
    </div>
    <div class="col-1 flex-first">
        4
    </div>
    <div class="col-1 flex-first">
        5
    </div>
</div>