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>

Answer 2

我需要提供一些代码和更多信息，但我认为这是可能的。

如果你想以纸牌方式做到：

只需将隐藏的溢出添加到顶部的卡片中，max-height即可20px。

上一个应该没有max-height和overflow:auto。

然而，如果没有flexbox，你正在做的事情可能更容易。 Flexbox也可以与position:abosolute一起使用。它们是不同的属性。举一些例子说明你想要完成什么，也许我能够提供帮助。

有没有办法使用flexbox语法将div叠加在一起？

2 个答案: