将flex-box项目与块中最后一行文本的基线对齐

Question

我正在尝试使用flex-box实现以下图片中的最后一个示例。

从我所看到的情况来看，当块只有1行时，align-items:baseline;属性效果很好。

align-items:flex-end;属性会产生一些问题，主要是因为左右两个项目具有不同的字体大小和行高。虽然项目的边缘对齐了，但由字体大小和行高差异产生的空白区域在没有边框的情况下看起来非常糟糕。

我正在尝试找到一个很好的全面解决方案，不需要使用任何JS。

提前感谢。

- José Eduardo Biasioli

Answer 1

你可以在 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，

'inline-block'的基线是其在正常流中的最后一行框的基线，_{^{除非它没有流动的行框或其'overflow'属性的计算值不是'visible'，此时基线是底部边缘。}}

- Oriol

---

它似乎在Chrome和Edge上运行正常，但在Firefox上不行。当inline-block直接应用于父<div>元素时，Firefox可以工作-在您的代码片段中-class item。有任何想法为什么会这样吗？在FF上工作的代码https://jsfiddle.net/realgs/1fahdw0o/。对于FF，您还可以指定最后一个基线而不是基线。 - user2923339

Answer 2

在编写本文时，CSS盒模型对齐工作草案提出了在“align-items”中添加“first”和“last”值的建议。这将允许以下用法：align-items: last baseline目前只有Firefox支持，所以这是未来的一个方向。

参考链接：https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

- Ric

Answer 3

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

最新的基线现在可以在主流浏览器上使用了！

- jonny holden

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community