Your source for leading technology

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;