使弹性项目重叠

Question

我想展示水平系列的未知数量的纸牌。为此，如果太多，它们将必须重叠。我很难说服伸缩盒在不缩小卡片的情况下重叠卡片。下面的示例缩小卡片。我尝试过flex- shrink: 0，但后来max-width没有受到尊重。

.cards {

  display: flex;

  max-width: 300px;

}



.card {

  width: 50px;

  height: 90px;

  border: 1px solid black;

  border-radius: 3px;

  background-color: rgba(255, 0, 0, 0.4);

}


<div class='cards'>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

  <div class='card'></div>

</div>

Answer 1

这就是我使用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 class="cards">

  <div class="cardWrapper">

    <div class="card">card 1 blah blah blah</div>

  </div>

  <div class="cardWrapper">

    <div class="card">card 2 blah blah blah</div>

  </div>

  <div class="cardWrapper">

    <div class="card">card 3 blah blah blah</div>

  </div>

  <div class="cardWrapper">

    <div class="card">card 4 blah blah blah</div>

  </div>

  <div class="cardWrapper">

    <div class="card">card 5 blah blah blah</div>

  </div>

</div>

请注意，从技术上讲，卡并不是重叠的，它们只是被剪裁了。但是它们 看起来 像是重叠的。诀窍是将每张卡包裹在另一个带有溢出的元素中：隐藏。

包装元素将缩小以适应可用空间，并且在该空间中显示尽可能多的卡片。

我加入了：hover规则只是为了展示如何从“堆栈”的中间完全显示一张牌，但是在一个真实的项目中，我可能会为选定的牌而不是悬浮的牌这样做。