使d性项目重叠

这就是我使用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规则只是为了展示如何从“堆栈”的中间完全显示一张牌，但是在一个真实的项目中，我可能会为选定的牌而不是悬浮的牌这样做。