这就是我使用flexbox做到的方式。
.cards { display: flex; align-content: center; max-width: 35em;}.cardWrapper { overflow: hidden;}.cardWrapper:last-child, .cardWrapper:hover { overflow: visible;}.card { width: 10em; min-width: 10em; height: 6em; border-radius: 0.5em; border: solid #666 1px; background-color: #ccc; padding: 0.25em; display: flex; flex-direction: column; justify-content: center; align-items: center;}<div > <div > <div >card 1 blah blah blah</div> </div> <div > <div >card 2 blah blah blah</div> </div> <div > <div >card 3 blah blah blah</div> </div> <div > <div >card 4 blah blah blah</div> </div> <div > <div >card 5 blah blah blah</div> </div></div>请注意，从技术上讲，卡并不是重叠的，它们只是被剪裁了。但是它们 看起来 像是重叠的。诀窍是将每张卡包裹在另一个带有溢出的元素中：隐藏。
包装元素将缩小以适应可用空间，并且在该空间中显示尽可能多的卡片。
我加入了：hover规则只是为了展示如何从“堆栈”的中间完全显示一张牌，但是在一个真实的项目中，我可能会为选定的牌而不是悬浮的牌这样做。
