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?

I think flexbox is the wrong technology for this, what code do you have so far? — pstenstrm, May 13 '15 at 07:19
flexbox wasn't really designed for this - positioning was. Is there a reason you aren't able to use positioning? — jbutler483, May 18 '15 at 12:45

score 23 · Answer 1 · answered May 15 '15 at 20:35

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>

Thanks for taking the time to answer this with a good example. — ian, May 18 '15 at 21:43

score 1 · Answer 2 · answered May 14 '15 at 11:54

I would need to have some code from you and more information, but I think it's possible.

If you want to do it solitaire way:

Just add overflow hidden to cards on top and max-height let's say 20px.

Last one should have no max-height and overflow:auto.

However thing that you are doing it's probably easier to do without flexbox. Flexbox can be used with position:abosolute too. They are different attributes. Give some examples of what are you trying to accomplish maybe I will be able to help.

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

2 Answers2