Vertically Align Text in A Flexbox

Flexbox vertical alignment differences

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.

Paragraphs within a flexbox with text not aligned
The three paragraphs are colored and are within a gray flexbox

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:

Flexbox with flex-align set to baseline
Flexbox with “flex-align: baseline;”

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;
}

About the author

I like learning, programming, and creating. I'm an incessant problem solver, and have an insatiable desire to absorb information. I'm an information sponge. A critical thinker. My left brain and right brain function as one. Business and technology should be one. I invest based on opportunity or technicals, whichever is right. I never let my schooling interfere with my education. Marketing is not fluff, it is data-driven. I find patterns, and analyze the random. I like to teach and explain.

Leave a Reply