C'è un modo per impilare i div uno sopra l'altro usando la sintassi flexbox?

Question

Problema di Flexbox. Spero che qualcuno possa aiutare :)

Sto provando a costruire un mazzo di carte fatte di div e impilarle l'una sull'altra come faresti usando la posizione: assoluta.

C'è un modo per far sì che i div si sovrappongano nello stesso spazio usando il flexbox?

Answer 1

Avrei bisogno di avere del codice da te e ulteriori informazioni, ma penso che sia possibile.

Se si vuole farlo modo solitario:

Basta aggiungere troppo pieno nascosto alle carte sulla parte superiore e max-height diciamo 20px.

L'ultimo non deve avere max-height e overflow:auto.

Tuttavia, ciò che si sta facendo è probabilmente più facile da fare senza il flexbox. Flexbox può essere utilizzato anche con position:abosolute. Sono attributi diversi. Dare alcuni esempi di cosa stai cercando di realizzare forse potrò aiutarti.

Answer 2

Un modo per ottenerlo è impostare un margine negativo. Un mazzo di carte usarlo:

.deck { 
 
    display: flex; 
 
    height: 200px; 
 
    flex-direction: column; 
 
} 
 

 
.card { 
 
    height: 100px; 
 
    width: 60px; 
 
    flex: 100px 1 0; 
 
    border: solid 1px black; 
 
    border-radius: 5px; 
 
    margin-bottom: -80px; 
 
    background-color: white; 
 
    box-shadow: 3px 3px 3px gray; 
 
}

<div class="deck"> 
 
<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>