The Powers of Flexbox Pt. 1 – Sticky Boxes

A ‘sticky footer’ is a trick web developers use to make sure than a sites’ footer is always at the bottom of the page. This was first introduced by Ryain Fait many years ago, and still serves developers to this day.

One of the largest revolutions in web development going on today is the enhancements made by the CSS3 enhancement, Flexbox.

Flexbox is a new layout method designed for the modern web, and gives immense power to developers.

We can use this new technology in a plethora of ways. In this article, I will illustrate how simple it can make common menial tasks in development, using the ‘sticky footer’ as the example.

Before, we would usually have a ‘main’ div container which held all of a pages content except the site footer. Then, we’d give it a negative bottom-margin, an invisible ‘push’ div to offset this, and some other css trickery to make footers stay at the bottom. You had to code the initial site-frame a specific way for this to work.

Enter Flexbox. Flexbox aims to provide a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (hence the name “flex”).

A sticky footer is now a simple task;

We can use any element as container, and have another element ‘stick’ to the bottom with a few lines of css;

Some basic html markup:

<div class="box">
  <div class="box"></div>
  <div class="box footer"></div>
</div>

And here’s all the css you need:

 #box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

As you can see, you can use this idea to have sticky elements within page elements, and it’s not restricted to a sites global footer.

For a global footer, check this out (credit to Dennis Gaebel).Which takes the idea much further, and supports browsers all the way back to IE6!

Hope it helps,