使用 flex 垂直对齐项目会拉伸子元素

Question

我在 flex 容器中有多个子元素 (span)，我想使用 align-items: center:

垂直对齐它们

<div class="w-full mb-1 flex items-center">
    <span class="border borderHighlight px-1" style="font-size: 0.6rem;">{{ badgeTitle }}</span>
    <span class="colorGray01 subText ml-1">&#183; {{ commentTimeStamp }}</span>
    <span class="negative subText font-extrabold text-sm ml-2">&bull;</span>
    <span>&#10003;</span>
</div>

没有 flexbox 类第一个 span 元素的边框适合元素本身。使用 flexbox，边框会拉伸到其中一个子元素的最大高度。

如何保持子元素的原始大小并将其垂直居中对齐？

对于那些不习惯 Tailwind 的人，父元素上的样式字面上是：

display: flex;
align-items: center;
width: 100%;
margin-bottom: 1rem;

子元素上根本没有影响此的样式。只是一些 color/font 样式和 margins/paddings。这更像是一个一般性的 css 问题。

Answer 1

通过将 <span>-Element 包裹在另一个 <span> 中修复了它。不确定，为什么它解决了问题，或者它是否是解决问题的好方法。但它成功了。

使用 flex 垂直对齐项目会拉伸子元素

Aligning items vertically with flex stretches child elements

css

flexbox