html - 有没有办法使用 flexbox 语法将 div 堆叠在一起？

Question

flexbox 问题。希望有人能提供帮助:)

我正在尝试构建一副由 div 组成的纸牌并将它们堆叠在一起，就像您使用 position:absolute 一样。

有什么方法可以让 div 在同一空间使用 flexbox 相互叠加吗？

Answer 1

获得它的一种方法是设置负边距。使用它的一副纸牌:

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