使用CSS对齐柱状图柱体与文本，解决长文本位移问题

我开发了一个生成简易柱状图的组件，柱体高度和背景色由组件计算生成，功能正常，但需解决视口较小时，长文本标签导致上方柱体位移的问题。

另外柱体宽度错误依赖文本宽度的问题将另行提问。

• 视口足够宽时的图表：各柱体底部对齐，标签在柱体下方居中显示，布局正常。
• 视口较小时的图表（这是我希望解决的问题）：长文本标签（如"Very Long Banana"）换行后，导致对应柱体及其他柱体位置偏移，布局错乱。

我认为其余柱体及其标签需要进行偏移处理？

对应的代码如下：

<div>
    <ul class="flex gap-3 items-end">
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center">Apple</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
            </span>
            <div class="text-sm text-center">Very Long Banana</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:64px;background-color:#fdae61" title="Orange - 15">
            </span>
            <div class="text-sm text-center">Orange</div>
        </li>
        <li class="flex flex-col flex-grow gap-1 content-center">
            <span style="height:106.66666666666667px;background-color:#fee08b" title="Grape - 25">
            </span>
            <div class="text-sm text-center">Grape</div>
        </li>
    </ul>
</div>

问题根源是li元素使用的content-center类会让flex容器内的内容垂直居中，当长文本标签换行后，li的整体高度被拉长，柱体就会跟着在li容器内垂直偏移，最终导致整个布局错乱。以下是几个直接可行的修复方案：

方案1：固定标签容器高度 #

给所有标签容器设置统一的最小高度，确保每个li的高度一致，柱体自然对齐：

<div>
    <ul class="flex gap-3 items-end">
        <li class="flex flex-col flex-grow gap-1">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center min-h-[2.5em]">Apple</div>
        </li>
        <li class="flex flex-col flex-grow gap-1">
            <span style="height:128px;background-color:#f46d43" title="Very Long Banana - 30">
            </span>
            <div class="text-sm text-center min-h-[2.5em]">Very Long Banana</div>
        </li>
        <!-- 其余li标签同理添加min-h类 -->
    </ul>
</div>

说明：min-h-[2.5em]可根据实际字体大小调整，确保能容纳最多两行文本即可。

方案2：让柱体与标签在li内上下分布 #

把content-center替换为justify-between，让柱体靠li顶部、标签靠li底部，无论标签高度如何，柱体位置都不会受影响：

<div>
    <ul class="flex gap-3 items-end">
        <li class="flex flex-col flex-grow gap-1 justify-between">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center">Apple</div>
        </li>
        <!-- 其余li同理替换类名 -->
    </ul>
</div>

方案3：替换content-center为items-center #

content-center是让整个内容块在容器内居中，而items-center仅控制子元素水平居中，垂直方向默认保持顶部对齐，结合ul的items-end属性，所有li底部对齐后，柱体自然不会偏移：

<div>
    <ul class="flex gap-3 items-end">
        <li class="flex flex-col flex-grow gap-1 items-center">
            <span style="height:42.666666666666664px;background-color:#d73027" title="Apple - 10">
            </span>
            <div class="text-sm text-center">Apple</div>
        </li>
        <!-- 其余li同理替换类名 -->
    </ul>
</div>

内容的提问来源于stack exchange，提问作者user9993