如何正确将卡片居中

Question

我使用 tailwindcss，我还使用 flex 来居中卡片，当同时使用 items-center 和 justify-center 时，它可以完美地居中，但是如果很少有卡片在它们之间创建很大的空间，那么我就无法让它们从头开始，所以我使用 justify-start ，这可以工作，但现在它不能正确居中，因为它在主容器内的一个方向上留下了空间，所以请如何解决这个问题，谢谢大家：D

<main className="max-w-[1200px] mx-auto my-20 flex flex-wrap items-center justify-center 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

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