使用 justify-start 和 items-center 时如何正确居中和对齐 Tailwind CSS 中的 Flex 项目？

Question

我使用 Tailwind CSS 在 Flex 容器中设置卡片的样式。最初，我使用

items-center

和

justify-center

将卡片水平和垂直居中。然而，我遇到了一个问题，当只有几张卡片时，它们之间会留出足够的空间。为了解决这个问题，我尝试使用

justify-start

，它解决了间距问题，但它导致卡片无法在容器内正确居中。

我当前的设置：

<main className="max-w-[1200px] mx-auto my-20 flex flex-wrap items-center justify-start gap-5">
  {series &&
    series.map(
      (serie) =>
        serie.backdrop_path &&
        serie.overview &&
        !("success" in serie) && (
          <div
            className="w-[170px] max-w-sm lg:w-[220px] rounded text-slate-200 p-2 flex-shrink-0"
            key={serie.id}
          >
            <DataCard dataType={serie} />
          </div>
        )
    )}
</main>

这是当前结果：

我想要的：

我想知道如何保持卡片与容器开头的对齐，同时确保它们在容器内水平居中。任何有关如何实现这一目标的建议或见解将不胜感激。

Answer 1

使用

flex-wrap

会帮助你

示例：

<div class="flex flex-wrap w-full items-center justify-center gap-4">
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-yellow-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-red-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-green-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-yellow-100"></div>
  </div>
  <div class="flex h-auto w-[170px] max-w-sm flex-shrink-0 items-start justify-center rounded p-2 text-slate-200 lg:w-[220px]">
    <div class="flex h-[12rem] w-[10rem] items-center justify-center bg-red-100"></div>
  </div>
</div>

结果：

这里我在父级中使用了

flex-wrap

。您可以使用相同的方法来解决您的问题。