Inline-flex

Flexbox has an inline variant: display: inline-flex;. Thanks to its beautiful centering abilities, you can do some wacky things with very little effort:

Figure 4.6: The inline equivalent of flex is the aptly named "inline-flex"

Here's the markup:

<p>
    Here is a sentence with a
    <span class="InlineFlex">inline-flex</span>.
</p>

And, using the same basic styles as the previous examples for the fonts, font sizes, and colors, here is the CSS needed:

.InlineFlex {
    display: inline-flex;
    align-items: center;
    height: 120px;
    padding: 0 4px;
    background-color: indigo;
    text-decoration: none;
    border-radius: 3px;
    color: #ddd;
}

When items are set as inline-flex anonymously, which happens if their parent element is not set to display: flex, then they retain whitespace (which can often manifest as an unwanted gap between elements), just like inline-block or inline-table do. However, if they are within...