Search code examples
cssflexboxbaseline

Align flex-box items to baseline of last text line in a block

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.

Solution

  • 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.