如何使弹性项目在列中重叠

Question

目标是将成堆的扑克牌垂直堆叠，是一个很好的心理图像（前一张牌的一点点从顶部伸出，最底部的牌完全可见）

我正在使用而不是 .cards，但从我所看到的来看，它们似乎与狙击行为 1-1 匹配。

对于水平堆叠，我复制了这个问题的最佳答案：使弹性项目重叠

.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  /*overflow: hidden;*/  /*using width shows better overlap*/
  min-width: 3.5em;
}

.cardWrapper:last-child, .cardWrapper:hover {
    /*overflow: visible;*/ 
    min-width: 10.5em; /*full width + 2*padding */
}

.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>

这太棒了，现在我只需要将它转换为垂直堆栈即可。

这是我尝试过的： 在“flex”中，默认的主轴是水平的，所以我希望指定列能够将所有内容排序，但可惜。 预期结果：整齐堆叠

实际结果：一列中的全高度卡

我尝试过的其他事情

• 也许包装器也需要是列 -> 添加显示：flex;弯曲方向：列；调整内容：居中；对齐项目：居中； -> 这只会将列移动到屏幕中心。
• 因为“弯曲方向：列；”在原始版本中为 .card 指定，可能会将其恢复为行的默认值 -> 据我所知，没有任何变化。

.cards {
  display: flex;
  flex-direction: column; /*change main axis to vertical, but now no stacking*/
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  /*overflow: hidden;*/  /*using width shows better overlap*/
  min-height: 2em;
}

.cardWrapper:last-child, .cardWrapper:hover {
    /*overflow: visible;*/ 
    min-height: 6.5em; /* full height + 2*padding*/
}

.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>

Answer 1

你几乎已经明白了。您将

min-width

更改为

min-height

，但忘记将

max-width

更改为

max-height

。只需更改它即可使用您当前的代码。

.cards {
  display: flex;
  flex-direction: column; /*change main axis to vertical, but now no stacking*/
  align-content: center;
  max-height: 22em;
}

.cardWrapper {
  /*overflow: hidden;*/  /*using width shows better overlap*/
  min-height: 2em;
}

.cardWrapper:last-child, .cardWrapper:hover {
    /*overflow: visible;*/ 
    min-height: 6.5em; /* full height + 2*padding*/
}

.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>