CODEWITHSUNDEEP
vue.jsflexboxtailwind-css
MAXWEL OCHIENG
MAXWEL OCHIENG

Reputation: 172

flex flex-row not working in array values mapped in VUE

I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature

<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
     <!-- Filter menus -->
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       class="flex flex-row items-center px-5 py-4"
     >
       <div class="">{{ filter.type }}</div>
     </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>

The UI that I get back

Upvotes: 0

Views: 130

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :

<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
     <!-- Filter menus -->
    <div class="flex items-center">
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       class=" px-5 py-4"
     >
       <div class="">{{ filter.type }}</div>
     </div>
    </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>

Upvotes: 2

Related Questions