使弹性项重叠

Question

我想展示一系列未知数量的扑克牌.要做到这一点,如果有太多,他们将不得不重叠.我无法说服弹性盒与卡片重叠而不缩小它们.以下示例缩小了卡片.我试过了flex-shrink: 0,但后来max-width没有得到尊重.

.cards {
  display: flex;
  max-width: 300px;
}

.card {
  width: 50px;
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
}

<div class='cards'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

Answer 1

您可以使用弹性布局中的元素重叠transform: translateX(-10px),但这不会解决您尝试获得的布局.我不认为你可以在flexbox中做到这一点.但你可以轻松地用JS做到这一点.

var parentEl = document.getElementById("cards");

function sortCards() {
  var cards = document.getElementsByClassName("card"),
      cw = parentEl.clientWidth,
      sw = parentEl.scrollWidth,
      diff = sw - cw,
      offset = diff / (cards.length - 1);

  for (var i = 0; i < cards.length; i++) {
    i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
  }
}

sortCards();

var b = document.getElementById("button");
b.addEventListener("click", function() {
  var div = document.createElement("div");
  div.classList.add("card");
  parentEl.appendChild(div);
  sortCards();
});

.cards {
  display: flex;
  max-width: 300px;
}

.card {
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  flex: 0 0 50px;
  background: red;
  transition: transform .25s;
}

<div><button id="button">addcards</button></div>
<div class='cards' id="cards">
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

Answer 2

这是我如何使用flexbox执行此操作.

.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  overflow: hidden;
}

.cardWrapper:last-child, .cardWrapper:hover {
    overflow: visible;
}

.card {
    width: 10em;
    min-width: 10em;
    height: 6em;
    border-radius: 0.5em;
    border: solid #666 1px;
    background-color: #ccc;
    padding: 0.25em;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

请注意,从技术上讲,卡片不重叠,它们只是被剪裁.但他们看起来像是重叠的.诀窍是将每张卡片包裹在另一个带溢出的元素中:隐藏.

包裹元件收缩以适应可用空间,并且尽可能多的卡片显示在该空间中.

我包括:hover规则只是为了展示如何从"堆栈"的中间完全显示一张卡片,但在一个真实的项目中,我可能会为选定的卡片而不是悬停的卡片执行此操作.

Answer 3

聚会迟到了，但这是我对类似情况的解决方案：

有一个建议提到负边距，确实，当没有进行其他调整时，卡片将始终与以下内容重叠：（margin-left: -30px;重叠宽度的选择有点随意。您可以选择卡片的宽度作为最大值。）

我在这里所做的改变是添加justify-content: space-evenly;到混合中。这会将卡片分散在弹性容器中的可用空间上，并且仅在过于拥挤时才让卡片重叠。如果您同意卡片在不重叠时像这样展开，这可能是一个解决方案。

注意。由于负边距将卡片拉向左侧，因此我还将与padding-left负边距相同宽度的卡片插入弹性容器中。

注意2。我更改了原始示例的不透明度，因为否则卡片会变得透明。

    .cards {
      display: flex;
      max-width: 300px;
      padding-left: 30px;
      justify-content: space-evenly;
    }

    .card {
      width: 50px;
      height: 90px;
      border: 1px solid black;
      border-radius: 8px;
      background-color: rgb(255, 100, 100);
      margin-left: -30px;
    }

    <div class='cards'>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
      <div class='card'></div>
    </div>

Answer 4

您可以使用网格而不是flex来仅使用css来实现。

.hand{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit,  minmax(10px, max-content)) ;
}
.card{
  width: 3em;
  height: 2.4em;
  padding: 3px;
  margin: 2px;
  background-color: lightgreen;
  border-style: solid;
  transform: rotate(3deg);  /*makes it easier to see the overlap*/
}

<div class="hand"> 
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
  <div class="card"> card </div>
</div>

Answer 5

flex容器用于将项目沿X和Y轴对齐。

您正在询问沿Z轴的对齐方式。

Flexbox不适用于z轴对齐（重叠）。

任何重叠都必须来自负边距，绝对定位，CSS网格布局，JavaScript或其他东西。该z-index属性可能还需要发挥作用。

这是使用CSS Grid的基本示例：

.cards {
  display: grid;
  grid-template-columns: repeat(30, 10px);
  grid-template-rows: 90px;
  max-width: 300px;
}

.card {
  grid-row-start: 1;
  background-color: lightgreen; 
  border: 1px solid black;
}

.card:nth-child(1) { grid-column: 1 / 6; }
.card:nth-child(2) { grid-column: 4 / 9; }
.card:nth-child(3) { grid-column: 7 / 12; }
.card:nth-child(4) { grid-column: 10 / 15; }
.card:nth-child(5) { grid-column: 13 / 18; }
.card:nth-child(6) { grid-column: 16 / 21; }
.card:nth-child(7) { grid-column: 19 / 24; }
.card:nth-child(8) { grid-column: 22 / 27; }
.card:nth-child(9) { grid-column: 25 / 30; }

<div class='cards'>
  <div class='card'>1</div>
  <div class='card'>2</div>
  <div class='card'>3</div>
  <div class='card'>4</div>
  <div class='card'>5</div>
  <div class='card'>6</div>
  <div class='card'>7</div>
  <div class='card'>8</div>
  <div class='card'>9</div>
</div>

使用基于行的放置使卡片重叠。在这种情况下，该grid-column属性用于使列轨道重叠。

但是，如果卡的数量动态变化，则需要一些脚本编写，因为为了使所有卡都能准确地装入固定宽度的容器中，重叠量将需要变化。