Vertically Align Text in A Flexbox

Thus far, I’m a huge fan of flexboxes. I ran into a bit of a block when I stuck three paragraphs with different font-sizes in the same row using a flexbox. Even after playing with the margin and padding and vertical-align (which, by the way, does nothing inside a flexbox) I couldn’t get the base of the text to align – notice that the middle of the plus sign below is just about at the base of 152.23.

But it turns out that flexboxes really can solve all of your layout problems. There’s a property flex-align (that I have set to “end” above) that can be set to “baseline” in order to align the bottom of the text of all the paragraphs in your flexbox. The end result:

The difference is subtle, but notice the extra gray space below the yellow and red paragraphs. Those two paragraphs have been shifted up so that the bottom of their text aligns with the bottom of 152.23 in the blue paragraph. If you look at the plus sign, you’ll see that it has been shifted up as the baselines are now aligned. The final HTML and CSS is below.

    
152.23
    
+2.04
    
23%

.div1 {
    display: -ms-inline-flexbox;
    -ms-flex-direction: row;
    -ms-flex-align: baseline;
    -ms-flex-pack: start;
    background: gray;
}

.div1 .myclass {
    margin: 0px;
}

.div1 #current-price {
    font-size: 42px;
    background: blue;
}

.div1 #price-change {
    font-size: 28px;
    background: yellow;
}

.div1 #percent-change {
    font-size: 28px;
    background: red;
}