How to align text on the same line in flexbox?

Question

I have aligned two divs side-by-side using Flexbox and I want the text in both the divs to be pushed to the bottom of the divs at equal levels but there seems to be different level of spacing underneath the individual texts.

.wrapper {
  display: flex;
  flex-direction: row;
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block2 {
  font-size: 1em;
  color: grey;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block1.hack-fix {
  line-height: 29px; /* HACK */
}

<h2>Current:</h2>
<div class="wrapper">
  <span class="block1">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
  <span class="block1 hack-fix">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>

Thanks for the help!

This is an issue of line height, due to different font sizes. Go read up on the relevant property, https://developer.mozilla.org/en-US/docs/Web/CSS/line-height — CBroe, Nov 10 '17 at 22:48

score 9 · Accepted Answer · answered Nov 11 '17 at 02:41

What you're looking for is called baseline alignment.

To achieve this in flexbox use align-items: baseline.

Here's a more complete explanation:

What's the difference between flex-start and baseline?

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline; /* NEW */
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
}

.block2 {
  font-size: 1em;
  color: grey;
}

<div class="wrapper">
  <span class="block1">23</span>
  <span class="block2">Quote</span>
</div>

score -1 · Answer 2 · answered Nov 11 '17 at 08:22

-1

Parents :

display: flex;

Children:

flex: 1;

answered Nov 11 '17 at 08:22

Andre Ramadhan

427
2
14

How to align text on the same line in flexbox?

2 Answers2