Tailwind CSS“justify-center”在与“flex-row”一起使用时有效，但不适用于“flex-col”

Question

我最近使用 NuxtJs 构建一个网站，遇到了一个问题：我无法将组件集中在 Flex 列中。但是当我删除“flex-col”类时，一切似乎都工作正常。 这是我的代码：

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

如您所见，只有一个 Flex 元素。我还设置了元素的宽度，这样我就可以确定这些 div 没有占据所有宽度。这是结果

但是当我删除“flex-col”语句时，一切都很顺利：

我尝试了在互联网上找到的大部分解决方案。像“m-0”一样，使元素弯曲等等。

Answer 1

不完全确定你真正想要什么，但我认为你正在寻找的是Flex父项上的

align-items: center

，以便当Flex方向为“列”时，让Flex项目水平居中对齐。

Answer 2

使用

flex-col

意味着横轴沿着可以使用

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>