css – 将弹性框项目与块中最后一行文本的基线对齐

我试图使用flex-Box在下面的图像上实现最后一个示例.

从我看到的,对齐项目：基线;当块只有1行时,属性很好.

属性align-items：flex-end;创建一些问题主要是因为左右项具有不同的字体大小和行高.虽然项目的边缘是对齐的,但是当项目没有边框时,由字体大小和行高差异创建的空白区域看起来非常糟糕.

我试图在没有任何JS的情况下找到一个好的全方位解决方案.

提前致谢.

解决方法

您可以将flex项的内容包装在inline-block包装器中：

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

这将是有效的,因为根据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.}}