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

【问题标题】：Aligning items vertically with flex stretches child elements使用 flex 垂直对齐项目会拉伸子元素
【发布时间】：2022-02-17 23:53:47
【问题描述】：

我在 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;

子元素上根本没有影响这一点的样式。只是一些颜色/字体样式和边距/填充。这更像是一个一般的 CSS 问题。

【问题讨论】：

请把你的风格也写出来。

标签： css flexbox

【解决方案1】：

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

【讨论】：