Flex列布局元素重叠问题：Tailwind CSS中如何避免标题与序号相交

问题原因 #

你当前使用百分比宽度w-1/12定义序号列宽度，同时条目容器加了flex-wrap属性，当父列被压缩时，1/12的宽度不足以容纳序号文本，要么会出现内容溢出和右侧Title重叠，要么序号列会换行导致内容错位。

解决方案 #

调整序号列和内容列的宽度规则，禁止序号列被压缩，用自动填充适配剩余宽度，修改点如下：

• 移除条目容器的flex-wrap属性，改为不换行排列
• 序号列添加shrink-0属性禁止压缩，用固定宽度替代百分比宽度，保证序号始终有足够的展示空间
• 右侧内容列使用flex-1自动填充剩余宽度，替代固定的w-11/12
• 给序号和内容之间添加固定间距gap-x-3，避免二者贴边

修改后的完整代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
        <div class="flex flex-row gap-x-3">
            <div class="flex-col shrink-0 w-8">
                <h4 class="text-xl font-bold">01</h4>
            </div>
            <div class="flex-col flex-1">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-row gap-x-3">
            <div class="flex-col shrink-0 w-8">
                <h4 class="text-xl font-bold">02</h4>
            </div>
            <div class="flex-col flex-1">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-row gap-x-3">
            <div class="flex-col shrink-0 w-8">
                <h4 class="text-xl font-bold">03</h4>
            </div>
            <div class="flex-col flex-1">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-row gap-x-3">
            <div class="flex-col shrink-0 w-8">
                <h4 class="text-xl font-bold">04</h4>
            </div>
            <div class="flex-col flex-1">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
        <div class="flex flex-row gap-x-3">
            <div class="flex-col shrink-0 w-8">
                <h4 class="text-xl font-bold">09</h4>
            </div>
            <div class="flex-col flex-1">
                <h4 class="text-3xl">Title</h4>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
            </div>
        </div>
    </div>
</div>

如果后续序号位数变多（比如到三位数），只需要调大序号列的固定宽度即可，比如把w-8改成w-12就能适配三位数字的展示。

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