缩小固定大小框之间的垂直间距以适应父级边界内的列表

Question

做一个纸牌游戏网络应用，我试图在CSS中放置尽可能多的渲染逻辑（可能只是对自己的挑战）。以下是一项更艰巨的挑战：与单人纸牌游戏一样，我需要显示垂直堆叠的纸牌（具有固定的尺寸和纵横比），如下图所示。 Stack 1 和 2 显示了原理。但是，如果堆栈变得非常大，则可能需要缩小卡片之间的垂直间距，以使整个堆栈适合父级的边界（图像中的堆栈 3）。要实现这种收缩，只有在堆栈溢出父边界的情况下，才是这个问题的内容。

一个 'intermediate' 结果是我能够使堆栈的行为像图像中的 3 和 4，方法是将每张卡片放在一个 0 高度的容器中，垂直均匀地分布在具有 flex 的堆栈中，然后从 -0% 到 -100% 对卡片的顶部边距进行线性插值。这个 margin-top 的设置必须用 JS 完成，在 CSS 之外，这是一个让步——但这不是最糟糕的解决方案，因为它不需要 JS 响应渲染本身.这个中间结果显然只适用于溢出情况（堆栈 3），而不适用于普通情况（图像中的堆栈 1 和 2），在这种情况下它很难看（堆栈 4）。

那么问题来了，能不能实现这个自动收缩只有过了某个临界点，只有CSS， and/or 可能有些 'before-render' attributes/styles 是用 JS 设置的。

问题草图（可以在 http://jsfiddle.net/kelleyvanevert/5fkac3s7/1/ 找到它的工作版本）：

堆栈 3 和 4 的弹性框 'intermediate result'：

CSS

.stack {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.surr {
  height: 0;
}

HTML

<div class="stack">
  <div class="surr"><div class="item" style="margin-top: -0%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -25%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -50%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -75%;"></div></div>
  <div class="surr"><div class="item" style="margin-top: -100%;"></div></div>
</div>

Answer 1

（有关其他结果，请参阅下面的评论）

您可以使用伪元素 (:after)，这将帮助您在拥有更多卡片时根据需要保持堆叠。然后你可以简单地控制这个元素的 flex 值来控制卡片应该收缩多少，因为它会控制这个元素应该占用多少 space:

.box {
  margin-top: 25px;
  border: 2px solid #000;
  height: 300px;
  display: flex;
  flex-direction: row;
}

.stack {
  position: relative;
  box-sizing: border-box;
  width: 15%;
  height: 100%;
  padding: 5px 5px 0 5px;
  margin: 0 10px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
    display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.label {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  text-align: center;
}

.item {
  box-sizing: border-box;
  height: 0;
  padding-top: 80%;
  /* aspect ratio */
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid #333;
}

.stack:after {
  content: "";
  flex: 5;
}

.surr {
  height: 0;
  flex: 1
}

<div class="box">
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">D</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>    
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  <div class="stack">
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>    
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="surr"><div class="item" ></div></div>
    <div class="label">E</div>
  </div>
  
</div>

缩小固定大小框之间的垂直间距以适应父级边界内的列表

Shrink vertical spacing between fixed-size boxes to fit list within parent's bounds

css

spacing

flexbox