我試圖實現下圖中的最后一個例子，使用flex-box。

在我看來，對齊項目:基線；當塊只有一行時，屬性工作得很好。

屬性align-items:flex-end；產生一些問題，主要是因為左邊和右邊的項目有不同的字體大小和行高。雖然項目的邊緣是對齊的，但是當項目沒有邊框時，由字體大小和行高差異產生的空白看起來很糟糕。

我在努力尋找一個沒有任何JS的好的全能解決方案。

提前感謝。

您可以將flex項目的內容包裝在內聯塊包裝器中:

.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框模型對齊工作草案時，建議將“第一個”和“最后一個”值添加到“對齊項目”中。這將允許:

對齊-項目:最后基線

目前它似乎只受到Firefox的支持，未來也是如此。

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

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

最后基線現在跨主要瀏覽器工作！