如何在Tailwind中实现标签过滤器的自动换行？

问题出在包裹分类项的flex容器默认不会自动换行，当子元素数量过多时会横向溢出页面。只需调整Tailwind类即可解决：

修改方案 #

1. 给分类项容器添加flex-wrap类，开启自动换行功能
2. 替换space-x-5为gap-x-3 gap-y-2，同时控制水平和垂直方向的间距，适配多行布局

修改后的完整代码 #

<div class="p-3 border-b">
    <div class="flex flex-col space-y-2 mt-2">
        <div class="flex flex-row space-x-2 text-sm" v-for="(filter,index) in filters" :key="index"> 
            <div class="w-16 text-base text-gray-700"> {{ filter.label }} </div>
            <!-- 调整后的分类项容器 -->
            <div class="flex flex-row flex-wrap gap-x-3 gap-y-2 text-gray-500 leading-6"> 
                <!-- 补充遍历category的v-for -->
                <span class="cursor-pointer" v-for="(item, idx) in filter.category" :key="idx"> {{ item.name }} </span>
            </div>
        </div>                            
    </div>                            
</div>

关键类说明 #

• flex-wrap：让flex容器在子元素总宽度超出容器时自动换行
• gap-x-3 gap-y-2：替代space-x-5，既保留水平间距，又给换行后的分类项添加垂直间距，避免布局拥挤

另外注意：原代码中缺少遍历filter.category的v-for指令，需要补上才能渲染所有分类项。

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