设置宽度时 Flex 无法正确对齐

Posted 2023-03-06

【中文标题】设置宽度时 Flex 无法正确对齐

【英文标题】：Flex does not align correctly when width set

【发布时间】：2018-12-07 03:54:09

【问题描述】：

我关注 Pen 和 Tailwind CSS https://codepen.io/SuddenlyRust/pen/zaMBoW

<ul class="max-w-xs w-full list-reset">
    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">1</div>

        <h4>
            <a href="#" class="text-black no-underline hover:underline">First steps with flex</a>
        </h4>

        <span class="ml-auto">9:00</span>
    </li>

    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">12</div>

        <h4>
            <a href="#" class="text-black no-underline hover:underline">How to align the bullets points correct</a>
        </h4>

        <span class="ml-left">19:00</span>
    </li>
</ul>

左侧的项目符号点不会设置相同的宽度。我给了它们 2.5rem 的宽度，但浏览器计算了两者的不同宽度（以 px 为单位）。有人知道我如何正确对齐所有内容。因为当我有一个长列表时，我想将文本居中对齐。或者也许有更好的解决方案？

【参考方案1】：

问题在于 flexbox 属性的第一个内容“使用 flex 的第一步”的宽度小于第二个“如何正确对齐项目符号点”，因此 flex 缩小了第二个的宽度以修复此应用宽度 100 % 到 h4 标签。

<ul class="max-w-xs w-full list-reset">
    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">1</div>

        <h4 class="w-full">
            <a href="#" class="text-black no-underline hover:underline">First steps with flex</a>
        </h4>

        <span class="ml-auto">9:00</span>
    </li>

    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">12</div>

        <h4 class="w-full">
            <a href="#" class="text-black no-underline hover:underline">How to align the bullets points correct</a>
        </h4>

        <span class="ml-left">19:00</span>
    </li>
</ul>

example codepen