it-swarm.com.de

Flex-Elemente überlappen lassen

Ich möchte eine horizontale Reihe einer unbekannten Anzahl von Spielkarten zeigen. Dazu müssen sie sich überlappen, wenn zu viele vorhanden sind. Ich habe Probleme, eine Flexbox davon zu überzeugen, die Karten zu überlappen, ohne sie zu verkleinern. Das Beispiel unten verkleinert die Karten. Ich habe versucht flex-shrink: 0, aber dann wurde max-width nicht respektiert.

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

7
Michael Arrison

Sie können Elemente in einem flexiblen Layout mit transform: translateX(-10px) überlappen, aber das Layout, das Sie erhalten möchten, wird nicht berücksichtigt. Ich glaube nicht, dass Sie das in Flexbox tun können. Mit JS ist dies jedoch problemlos möglich.

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>

11
Michael Coker

Hier ist, wie ich das mit der Flexbox mache.

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

Beachten Sie, dass sich die Karten technisch gesehen nicht überlappen, sondern nur abgeschnitten werden. Aber sie sehen aus als würden sie sich überlappen. Der Trick ist, jede Karte in ein anderes Element mit Überlauf zu wickeln: versteckt.

Die Umhüllungselemente werden auf den verfügbaren Platz geschrumpft und so viele Karten wie möglich in diesem Platz angezeigt.

Ich füge die: hover-Regel hinzu, um zu zeigen, wie Sie eine Karte in der Mitte des "Stapels" vollständig anzeigen können, aber in einem realen Projekt würde ich dies wahrscheinlich für ausgewählte Karten anstelle von schwebenden Karten tun.

8
FTWinston

Ein flexibler Container dient zum Ausrichten von Elementen entlang der X- und Y-Achse. 

Sie fragen nach der Ausrichtung entlang der Z-Achse.

Flexbox ist nicht für die Ausrichtung der Z-Achse (überlappend) ausgelegt. 

Jede Überlappung muss aus negativen Rändern, absoluter Positionierung, CSS-Rasterlayout, JavaScript oder etwas anderem stammen. Die z-index-Eigenschaft muss möglicherweise auch eine Rolle spielen.

Hier ist ein grundlegendes Beispiel für die Verwendung von 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>

Karten werden durch linienbasierte Platzierung überlappt. In diesem Fall wird die grid-column-Eigenschaft verwendet, um Spaltenspuren überlappen zu lassen.

Allerdings ist etwas Skripting erforderlich, wenn die Anzahl der Karten dynamisch variiert, da der Überlappungsbetrag variieren muss, damit alle Karten genau in den Container mit fester Breite passen.

3
Michael_B

Ich entwickelte eine generische, CSS-basierte Lösung. Allerdings mit einigen Vorbehalten:

  1. Die letzte Karte überläuft den .cards-Container.
  2. Ein untergeordnetes Element von .card ist erforderlich, um den überlappenden Effekt zu erzeugen.

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

2
Nate Whittaker

Sie können dies tun, indem Sie nur css verwenden, indem Sie grid anstelle von flex verwenden.

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

2
Max Garber

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>

0
Cuse70