15

I am trying to achive the last example on the following image, using flex-box.

enter image description here

From what I see, the align-items: baseline; property works great when the blocks only have 1 line.

The property align-items: flex-end; creates some issues mainly because the left and right items have different font-sizes and line-heights. Although the edges of the items are aligned, the white space created by the font size and line-height differences looks really bad when the item has no borders.

I'm trying to find a good all-around solution without any JS.

Thanks in advance.

José Eduardo Biasioli
  • 201
  • 2
  • 7

3 Answers3

23

You can wrap the contents of the flex items inside inline-block wrappers:

.flex {
  display: flex;
  align-items: baseline;
}
.inline-block {
  display: inline-block;
}

.item { border: 1px solid red; }
.item:first-child { font-size: 200%; }
.flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }
<div class="flex">
  <div class="item">
    <div class="inline-block">Lorem<br />Ipsum<br />Dolor</div>
  </div>
  <div class="item">
    <div class="inline-block">Foo bar</div>
  </div>
</div>

That will work because, according to CSS 2.1,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • it seems to be working on chrome & edge but not in firefox. Firefox works when inline-block is applied directly to parent
    elements- in your snipped - class item. Any idea why is it so? The code that works on FF https://jsfiddle.net/realgs/1fahdw0o/ . For FF you can also specify last baseline instead of baseline.
     – user2923339 Jul 23 '19 at 09:54
5

At the time of writing the CSS box model alignment working draft proposes a ‘first’ and ‘last’ value to be added to ‘align-items’. The would allow:

align-items: last baseline

Current it only appears to be supported by Firefox so is one for the future.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Ric
  • 3,195
  • 1
  • 33
  • 51
1

https://web.dev/last-baseline/

Last baseline now works across major browsers!

jonny holden
  • 11
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 24 '23 at 06:06