我试图使用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.
