Responsive Web Design with HTML5 and CSS3, Second Edition

Getting Flexy

Flexbox has four key characteristics: direction, alignment, ordering, and flexibility. We'll cover all these characteristics and how they relate by way of a few examples.

The examples are deliberately simplistic; just moving some boxes and their content around so we can understand the principals of how Flexbox works.

Perfect vertically centered text

Note that this first Flexbox example is example_03-03:

Here's the markup:

<div class="CenterMe">
    Hello, I'm centered with Flexbox!
</div>

Here is the entire CSS rule that's styling that markup:

.CenterMe { background-color: indigo; color: #ebebeb; font-family: 'Oswald', sans-serif; font-size: ...