使弹性项目重叠

Question

我想展示一系列未知数量的扑克牌。为此，如果数量太多，它们将不得不重叠。我无法说服 flex box 在不缩小卡片的情况下重叠卡片。下面的例子缩小了卡片。我尝试了 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

弹性容器设计用于沿 X 轴和 Y 轴对齐项目。

您问的是沿 Z 轴的对齐方式。

Flexbox 不是为 z 轴对齐（重叠）而设计的。

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

这是一个使用 CSS 网格的基本示例：

.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>

使用 line-based placement 使卡片重叠。在这种情况下，grid-column 属性用于使列轨道重叠。

不过，如果卡片的数量动态变化，则需要编写一些脚本，因为重叠量需要变化，以便所有卡片都能精确地适合固定宽度的容器。

Answer 2

您可以使用 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 = 1; i < cards.length; i++) {
    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 3

您可以使用保证金属性并通过手动或 JS 应用到您想要的项目。

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

.overl {
margin-left:-10px;
}

.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 overl'></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

我想出了一个通用的 CSS-based 解决方案。但是，有一些注意事项：

最后一张卡片溢出 .cards 容器。
需要 .card 的子元素才能产生重叠效果。

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

.card {
  position: relative;
  flex-basis: 50px;
  height: 90px;
}

.card::before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 100%;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
  box-sizing: border-box;
}

<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 5

下面是我使用 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>

请注意，从技术上讲，卡片并没有重叠，它们只是被裁剪了。但它们 看起来 像是重叠的。诀窍是用 overflow: hidden.

将每张卡片包裹在另一个元素中

包装元素已缩小以适合可用的 space，并在 space 中显示尽可能多的卡片。

我加入 :hover 规则只是为了展示如何从 "stack" 的中间完全显示卡片，但在实际项目中我可能会对选定的卡片而不是悬停的卡片执行此操作.

Answer 6

您可以只使用 css 通过使用 grid 而不是 flex 来做到这一点。

.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 7

div.card-area
{
    height: 16vh; /* whatever */
    display: flex;
}
div.card-area > div
{
    flex: 1 0 0;
    overflow-x: hidden;
}
div.card-area > div:last-of-type
{
    flex: 0 0 auto;
}
div.card-area img
{
    height: 100%;
}

<div class="card-area N">
    <div><img src="img/cards/AH.png"></div>
    <div><img src="img/cards/KH.png"></div>
    <div><img src="img/cards/QH.png"></div>
    <div><img src="img/cards/JH.png"></div>
    <div><img src="img/cards/10H.png"></div>
    <div><img src="img/cards/9H.png"></div>
    <div><img src="img/cards/8H.png"></div>
    <div><img src="img/cards/7H.png"></div>
    <div><img src="img/cards/6H.png"></div>
    <div><img src="img/cards/5H.png"></div>
    <div><img src="img/cards/4H.png"></div>
    <div><img src="img/cards/3H.png"></div>
    <div><img src="img/cards/2H.png"></div>
</div>

Answer 8

这与右侧 child 重叠在左侧 child 之上，不包括第一个。

.overlapped {
  > * + * {
    postion: absolute;
    margin-left: -7px;
  }
}

您的容器还应该有 flex 和 flex-direction 行。

Answer 9

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

有人建议提到负边距，确实，当没有进行其他调整时，卡片将始终重叠：margin-left: -30px;（重叠宽度的选择有些随意。您可以选择卡片的最大宽度。 )

我在这里所做的更改是将 justify-content: space-evenly; 添加到混音中。这会将卡片分散到 flex 容器中可用的 space 上，并且仅在太拥挤时才让卡片重叠。可能是一个解决方案，如果你不介意卡片在不重叠时像那样展开的话。

注意。由于负边距将卡片拉向左侧，我还侵入了一个与负边距相同宽度的 padding-left 到 flex 容器中。

NB2。我更改了原始示例的不透明度，否则卡片会变得透明。

    .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>

使弹性项目重叠

Make flex items overlap

html

css

flexbox

css-grid