Getting flexy

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

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

Perfect vertically centered text

Note that this first flexbox example is example_04-03.

Figure 4.2: Centering is simple with flexbox

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: 2rem;
    text-transform: uppercase;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

The majority of...