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: ...
Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.