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

Posted 2023-03-06

【中文标题】有没有办法使用 flexbox 语法将 div 堆叠在一起？

【英文标题】：Is there a way to stack divs on top of each other using flexbox syntax?

【发布时间】：2014-12-31 17:26:48

【问题描述】：

弹性盒问题。希望有人可以提供帮助:)

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

有没有办法让 div 使用 flexbox 在同一个空间中相互叠加？

【问题讨论】：

我认为 flexbox 是错误的技术，到目前为止你有什么代码？

flexbox 并不是为此而设计的——定位是。您是否有无法使用定位的原因？

***.com/q/43919067/3597276

【参考方案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>

【讨论】：

感谢您花时间用一个很好的例子来回答这个问题。

很高兴它帮助了你！

【参考方案2】：

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

如果你想做接龙方式：

只需将溢出隐藏添加到顶部的卡片和max-height 让我们说20px。

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

但是，您正在做的事情可能更容易在没有 flexbox 的情况下完成。 Flexbox 也可以与position:abosolute 一起使用。它们是不同的属性。举一些你想要完成的例子，也许我能提供帮助。