使弹性项目重叠 [英] Make flex items overlap

问题描述

我想展示一系列未知数量的扑克牌。要做到这一点，如果有太多的话，他们将不得不重叠。我无法说服一个弹性盒重叠卡而不缩小它们。下面的例子缩小了卡片。我试过 flex-shrink：0 ，但是 max-width 没有被尊重。

.cards {display：flex; max-width：300px;}。card {width：50px;身高：90px;边框：1px纯黑色; 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>  

您可以使用 transform：translateX（-10px）创建flex布局重叠中的元素，但是将不会解决您试图获得的布局。我不认为你可以在Flexbox中做到这一点。但是你可以很容易地做到这一点与JS。

$ b

var parentEl = document.getElementById （cards）;函数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 {display：flex; max-width：300px;}。card {height：90px;边框：1px纯黑色; border-radius：3px; background-color：rgba（255，0，0，0.4）; flex：0 0 50px;背景：红色; 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>

I'd like to show a horizontal series of a unknown number of playing cards. To do this, they will have to overlap if there are too many. I'm having trouble convincing a flex box to overlap the cards without shrinking them. The example below shrinks the cards. I tried flex-shrink: 0, but then max-width wasn't respected.

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

解决方案

You can make elements in a flex layout overlap using transform: translateX(-10px), but that won't address the layout you're trying to get. I don't think you can do that in flexbox. But you could easily do this with 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>

这篇关于使弹性项目重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！