将弹性框项目与块中最后一个文本行的基线对齐 [英] Align flex-box items to baseline of last text line in a block

问题描述

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

I am trying to achive the last example on the following image, using flex-box.

据我所见，当块只有1行时， align-items：基线; 属性非常有用。

From what I see, the align-items: baseline; property works great when the blocks only have 1 line.

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

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.

预先感谢。

推荐答案

您可以将flex项的内容包装在内联块包装器中：

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>

因为，根据 CSS 2.1 ，

inline-block的基线是正常流中其最后一个行框
的基线， ^{_{除非它没有流入线
框，或者其溢出属性具有除
可见之外的计算值，在这种情况下，基线是底部边距
边缘。}}

这篇关于将弹性框项目与块中最后一个文本行的基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！