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

Posted 2023-02-23

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

【英文标题】：Align flex-box items to baseline of last text line in a block

【发布时间】：2015-11-19 11:28:06

【问题描述】：

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

据我所知，align-items: baseline; 属性在块只有 1 行时效果很好。

align-items: flex-end; 属性产生了一些问题，主要是因为左右项具有不同的字体大小和行高。尽管项目的边缘是对齐的，但当项目没有边框时，由字体大小和行高差异产生的空白看起来非常糟糕。

我正在尝试找到一个没有任何 JS 的好的全能解决方案。

提前致谢。

【参考方案1】：

在撰写 CSS 盒模型对齐工作草案时，建议将“first”和“last”值添加到“align-items”。将允许：

align-items: last baseline

目前它似乎只受 Firefox 支持，因此未来也是如此。

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

【参考方案2】：

您可以将 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' 的基线是其最后一个行框的基线 在正常流程中，_{^{除非它没有流入线 框，或者如果它的“溢出”属性的计算值不是 'visible'，在这种情况下，基线是下边距 边缘。}}

【讨论】：

它似乎在 chrome 和 edge 上工作，但在 Firefox 中没有。当 inline-block 直接应用于父 元素时，Firefox 可以工作 - 在您的剪辑类项目中。知道为什么会这样吗？适用于 FF jsfiddle.net/realgs/1fahdw0o 的代码。对于 FF，您还可以指定最后一个基线而不是基线。