如何以固定宽度重叠弹性项目？

Question

我想要的最终结果是this，我能够得到的结果是this。

基本上，当卡片溢出其父级时，我希望卡片以固定宽度重叠。 当它不溢出时，我希望它们根据纵横比保留宽度。 我已经固定了高度，所以宽度也应该是恒定的。

您可以点击每张卡片，它将在每个链接中删除。但是在第二个/不工作的链接中，卡变得太大，这也是一个问题。

我该如何解决这个问题？

<div class="container">
  <div class="player player-1"> p1 </div>
  <div class="card_area card_area-1">card-1</div>

  <div class="player player-2">p2</div>
  <div class="card_area card_area-2">card-2</div>

  <div class="player player-3">p3</div>
  <div class="card_area card_area-3">card-3</div>

  <div class="player player-4">p4</div>
  <div id="render_cards" class="card_area  card_area-4">
    <div class="card card-odd card-1">card-1</div>
    <div class="card card-even card-2">card-2</div>
    <div class="card card-odd card-3">card-3</div>
    <div class="card card-even card-4">card-4</div>
    <div class="card card-odd card-5">card-5</div>
    <div class="card card-even card-6">card-6</div>
    <div class="card card-odd card-7">card-7</div>
    <div class="card card-even card-8">card-8</div>
    <div class="card card-odd card-9">card-9</div>
    <div class="card card-even card-10">card-10</div>
    <div class="card card-odd card-11">card-11</div>
    <div class="card card-even card-12">card-12</div>
    <div class="card card-odd card-13">card-13</div>

  </div>
</div>

.container {
  width: 60%;
  margin: 5px auto;
  border: 2px solid green;
  aspect-ratio: 3/2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.player {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: bisque;
}

.player-1 {
  grid-row: 1;
  grid-column: 3;
}

.card_area-1 {
  grid-row: 1;
  grid-column: 4;
}

.player-2 {
  grid-row: 4;
  grid-column: 6;
}
.card_area-2 {
  grid-row: 3;
  grid-column: 6;
}

.player-3 {
  grid-row: 3;
  grid-column: 1;
}
.card_area-3 {
  grid-row: 4;
  grid-column: 1;
}

.player-4 {
  grid-row: 6;
  grid-column: 2;
}
.card_area-4 {
  grid-row: 6;
  grid-column: 3/6;
}
.card_area {
  background-color: rgb(232, 127, 127);
}

.card:hover {
  background-color: aqua;
}

.card-odd {
  background-color: gray;
}
.card-even {
  background-color: darkkhaki;
}

.card_area-4 {
  width: 100%;
}
.card:last-child {
  flex: 0 0 auto;
}

.card {
  flex: 1;

  aspect-ratio: 2/3;
  text-align: center;

  height: 110%;
  transform: translateY(-10%);
  flex-start: start;
  min-width: 100px;
  max-width: auto;
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
} 

.card_area-4 {
  
  display: flex;
  justify-content: center;
}

let cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
const card_els = Array.from(document.getElementsByClassName("card"));
console.log(cards)
card_els.forEach((card) => {
  card.addEventListener("click", (e) => {
    e.target.remove();
    console.log("haha")
  });
});

Answer 1

您可以使用 Flexbox 进行初始布局，但您仍然需要使用相对定位并使用 Javascript 来计算偏移量。这个问题没有纯 CSS 解决方案。

document.querySelectorAll('.c2').forEach(c2 => {
  const c2children = Array.from(c2.children)
  const x = (c2children[0].clientWidth * c2children.length - c2.clientWidth) / (c2children.length - 1)
  for (i = 0; i < c2children.length; i++) {
    const c = c2children[i]
    c.style.left = `${i * -x}px`
  }
})

.cards {
  display: flex;
  margin-bottom: 1em;
  border: 5px solid orange;
  width: 250px;
}

.cards > div {
  width: 75px;
  height: 100px;
  transform: rotate(-5deg);
  flex-shrink: 0;
}

.cards > div:nth-child(odd) {
  background: cyan;
}

.cards > div:nth-child(even) {
  color: white;
  background: black;
}

.c2 > div {
  position: relative;
}

<div class="cards">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="cards c2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="cards c2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>