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.
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>