Сделайте так, чтобы перекрывающиеся гибкие элементы оставались по центру как группа ⇐ Html

[Anonymous]

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



отрицательный зазор не приводит к их перекрытию.
Чего я хочу

• Карточки должны перекрываться
• Вся перекрывающаяся группа должна оставаться идеально центрированной в контейнере.

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

.container {
width: 300px;
height: 150px;
border: 2px solid white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* gap: -40px; */
/* gap does not work for some reason!*/
}

.card {
height: 100px;
width: 65px;
margin-right: -50px;
}

html,
body {
height: 100%;
background-color: #000;
}

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

[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]

https://jsfiddle.net/eg9pfch3/

Подробнее здесь: https://stackoverflow.com/questions/798 ... as-a-group