css 将弹性框项与块中最后一个文本行的基线对齐

lymgl2op 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(159)

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

在我看来，align-items: baseline;属性在块只有1行时工作得很好。
属性align-items: flex-end;会产生一些问题，主要是因为左右项具有不同的字体大小和行高。虽然项目的边缘是对齐的，但是当项目没有边框时，由字体大小和行高差异创建白色看起来非常糟糕。
我试图找到一个很好的全面解决方案，没有任何JS。
先谢谢你了。

css

来源：https://stackoverflow.com/questions/32209427/align-flex-box-items-to-baseline-of-last-text-line-in-a-block

3条答案

按热度按时间

xzv2uavs1#

您可以将flex项的内容 Package 在inline-block Package 器中：

.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”之外的计算值，在这种情况下，基线是底部边距边缘。

赞(0）回复(0）举报 2023-05-30

mqkwyuun2#

在编写CSS框模型对齐工作草案时，建议将“first”和“last”值添加到“align-items”中。这将允许：
align-items: last baseline
目前它似乎只被Firefox支持，所以是未来的一个。
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

赞(0）回复(0）举报 2023-05-30

imzjd6km3#

https://web.dev/last-baseline/
最后一个基线现在可以在主要浏览器上使用！

赞(0）回复(0）举报 2023-05-30