1

I'm basically trying to get the baseline of the value to align with the baseline of the bottom unit instead of the first as it's happening in my code below.

I can get it to work if I ditch flexbox altogether but I need it for responsiveness.

The canonical advice seems to be to wrap flex items in inline-block but, as you can see from that codepen, it doesn't seem to work for me.

Here's the codepen where I've been trying stuff: https://codepen.io/jskrt/pen/OJyXxyv

.value_and_unit {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: baseline;
}

.value {
  line-height: 1;
  font-size: 120px;
  margin-right: 10px;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
}

.divider {
  width: 100%;
}

.inline-block {
  display: inline-block;
}
<div class="value_and_unit">
  <span class="value">
    340
  </span>
  <div class="unit_container">
    <span class="unit">
      m
    </span>
    <hr class="divider" />
    <span class="unit">
      s
    </span>
  </div>
</div>
jskrtsth
  • 151
  • 1
  • 5
  • 13

3 Answers3

1

If the .value element will contain numbers only, then you can probably get away with a simple adjustment to the line-height. Make it bit smaller, so that the line box shrinks-to-fit the font height.

.value_and_unit {
  display: flex;
  border: 1px solid red; /* demo */
}

.value {
  line-height: .75; /* key adjustment */
  font-size: 120px;
  margin-right: 10px;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
}

.divider {
  width: 100%;
}
<div class="value_and_unit">
  <span class="value">340</span>
  <div class="unit_container">
    <span class="unit">m</span>
    <hr class="divider" />
    <span class="unit">s</span>
  </div>
</div>

However, this method won't work if the .value element contains random letters, because the extra space above and below the numbers exists to accommodate descenders and ascenders.

In such case, you would need to try another method. align-items: flex-end would work (i.e. the visual baselines would be aligned), but the units would align below the numbers in this case.

.value_and_unit {
  display: flex;
  align-items: flex-end;
  border: 1px solid red;
  padding: 5px;
}

.value {
  font-size: 120px;
  margin-right: 10px;
  border: 1px dashed blue;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border: 1px dashed blue;
}

.divider {
  width: 100%;
}
<div class="value_and_unit">
  <span class="value">340j&Aacute; </span>
  <div class="unit_container">
    <span class="unit">m</span>
    <hr class="divider" />
    <span class="unit">s</span>
  </div>
</div>

So, because you want the "s" baseline aligned with the numbers' baseline, you're not actually seeking baseline alignment (because the true baseline of the larger box is under the "j"). You want an arbitrary alignment, so an adjustment to the line-height may be appropriate in this case.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

Try the following:

.value_and_unit {
    display: flex;
    /* flex-flow: row nowrap; */
    /* justify-content: flex-start; */
    /* align-items: baseline; */
}

.value {
    font-size: 120px;
    margin-right: 10px;
    line-height: 1;
}

Tell me if this is the desired effect, and if not, tell me what is the problem, so I have a clue to follow. Good luck!

EDIT: Replace the <h1> tag with <div> because browsers add line-height, margin and other properties to it by default! Style the item as desired, by adding bold by yourself. Keep in mind that h1 is a semantic tag with high weight and should not be used when not required!!!

EDIT2: I forgot to mention that I worked with the code in real environment and not in the code pen and everything seemed well if I understood your problem correctly. Try it yourself in real server too, if there is a problem with the codepen.

Enchew
  • 981
  • 5
  • 11
  • I changed it to span. It's not the desired effect as the unit goes past the baseline of the value. I need the baseline of the "s" to align with the baseline of the value. – jskrtsth Apr 18 '20 at 21:27
  • This is the result, that I got: https://imgur.com/a/wOQKkdy They seem pretty aligned to me. If I still didn't get it, please "draw" the desired effect with paint or something like that, because otherwise, I seem to misunderstand something. – Enchew Apr 18 '20 at 21:30
  • This is essentially what I'm trying to achieve: https://stackoverflow.com/questions/32209427/align-flex-box-items-to-baseline-of-last-text-line-in-a-block – jskrtsth Apr 18 '20 at 21:33
-1

Try to make the align-items value to end. It is like this

align-items: end;
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Moayad .AlMoghrabi
  • 1,249
  • 1
  • 11
  • 18