Как правильно центрировать и выравнивать гибкие элементы в CSS Tailwind при использовании justify-start и items-center? ⇐ CSS

[Anonymous]

Я использую Tailwind CSS для оформления карточек в гибком контейнере. Первоначально я центрировал карточки по горизонтали и вертикали с помощью items-center и justify-center. Однако я столкнулся с проблемой, когда карточек всего несколько, между ними остается достаточно места. Чтобы решить эту проблему, я попытался использовать justify-start, который решил проблему с пробелами, но из-за этого карточки не были правильно центрированы внутри контейнера.
Моя текущая настройка:

Код: Выделить всё

{series &&
series.map(
(serie) =>
serie.backdrop_path &&
serie.overview &&
!("success" in serie) && (
className="w-[170px] max-w-sm lg:w-[220px] rounded text-slate-200 p-2 flex-shrink-0"
key={serie.id}
>


)
)}

И вот текущий результат:
[img]https://i.stack. imgur.com/arQov.png[/img]

Как я хочу:

Мне хотелось бы знать, как мне сохранить выравнивание карточек в начале контейнер, обеспечивая при этом их горизонтальное центрирование внутри него. Будем очень признательны за любые предложения или идеи о том, как этого добиться.

Подробнее здесь: https://stackoverflow.com/questions/782 ... -justify-s