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.
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: 2rem;
text-transform: uppercase;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}The majority of the property/value pairs in that rule are merely setting colors and font sizing. The three properties we are interested in are:
.CenterMe {
/* other properties */
...