Practical applications

So now that we have learned a bit about how flexbox works, what practical applications does it have in web design?

Centering

Vertically centering elements has long been a problematic process, usually ending in using some nasty combination of positioning or just using tables. With flexbox, however, vertical alignment is trivial, and independent of sibling elements.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
This item is centered!

The Holy Grail layout

One of the most sought after web design layouts, often known as the holy grail of layouts fulfils the following:

Doing this usually relies on hacks such as faux-columns using repeating background images, over-the-top nesting of divs and some combination of floats or positions. Using flexbox a much easier solution is possible.

.container { display: flex; }
.grail-nav { order: -1; }
.grail-content { flex-grow: 1; }
.grail-nav,
.grail-ads {
    flex-shrink: 0;
    flex-basis: 200px;
}

<div class="grail">
    <main class="grail-content">…</main>
    <nav class="grail-nav">…</nav>
    <aside class="grail-ads">…</aside>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tempus ante. Quisque sit amet efficitur eros. Aenean nec hendrerit urna, a laoreet velit. In ac pretium diam, ut auctor leo. Ut et dui laoreet, vehicula sapien id, viverra metus. Sed ut bibendum libero. Maecenas non felis sed urna ultricies pellentesque nec id purus.

Further reading