Home Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"

Questions

Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"

October 18, 2024

I was recently building a website using NuxtJs and ran into a problem: I cant center components in a that are in a flex column. but when i removed the "flex-col" class everything seemed to work fine.
Here’s my code:

<script setup>
</script>
<template>

    <div class="bg-slate-800">
    <div class="h-48"></div>
      <div class="flex flex-col  justify-center">
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
      </div>
    </div>
</template>

As you can see there’s only one flex element. And i also set the width of the elements so i can be sure those divs werent taking all the width. Here’s the result

But when i remove the "flex-col" statement, it all goes well:

I tried most of the solutions i found on the internet. Like ‘m-0’, making the elements flex and so on.

>Solution :

Using flex-col means that cross axis runs along the rows where you can using items-center :

 <div class="flex flex-col  items-center">
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
      </div>