Is there a way to stack divs on top of each other using flexbox syntax?

Question

Flexbox issue. Hopefully someone can help :)

I'm trying to build a deck of cards made of divs and stack them over each other like you would using position:absolute.

Is there any way to get divs to overlay each other in the same space using flexbox?

Answer 1

One way to get it is to set a negative margin. A deck of cards using it:

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