Vue中循环数组项时Tailwind flex-row不生效问题排查

你的问题核心是flex容器的层级错误：当前代码给每个循环生成的子div单独添加了flex flex-row，这只会让单个子div内部的元素横向排列，但每个子div本身是块级元素，自然会纵向堆叠。

正确写法是给循环项的父容器添加flex布局，把v-for放到父容器内部的子元素上：

<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
     <!-- Filter menus -->
     <div class="flex flex-row"> <!-- 父容器添加flex布局 -->
       <div
         v-for="filter in filterTypes"
         :key="filter.type"
         class="items-center px-5 py-4" <!-- 移除子元素的flex类 -->
       >
         <div>{{ filter.type }}</div>
       </div>
     </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>

如果需要在空间不足时让filter项自动换行，给父容器追加flex-wrap类即可：class="flex flex-row flex-wrap"。

补充：Tailwind中flex-row是flex布局的默认方向，父容器只加flex类也能实现横向排列，flex-row可以省略。

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