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

2019年7月28日 143次阅读

制作纸牌游戏网络应用程序,我试图在CSS中尽可能多地使用渲染逻辑(可能只是对我自己的挑战).其中一个更难的挑战是如下：在纸牌中,我需要显示垂直堆叠的卡片(具有固定的尺寸和纵横比),如下图所示.堆栈1和2显示了原理.但是,如果堆栈变得非常大,则可能需要缩小卡之间的垂直间距,以使整个堆栈适合父级的边界(图像中的堆栈3).要实现这种缩小,仅在堆栈溢出父级边界的情况下,才是这个问题的内容.

“中间”结果是我能够使堆栈在图像中表现得像3和4,方法是将每张卡放在一个0高度的容器中,在堆栈内使用flex垂直均匀间隔,然后线性插值边距 – 卡的顶部从-0％到-100％. margin-top的这个设置必须在CSS之外用JS完成,这是一个让步 – 但它不是最糟糕的解决方案,因为它不需要JS响应渲染本身.这个中间结果显然只适用于溢出情况(堆栈3),而不适用于普通情况(图像中的堆栈1和2),在这种情况下它很难看(堆栈4).

问题是,是否有可能仅在通过某个关键的中断点之后才能实现这种自动收缩,仅使用CSS,和/或可能使用JS设置一些’before-render’属性/样式.

问题草图(其工作版本可在http://jsfiddle.net/kelleyvanevert/5fkac3s7/1/找到)：

《css – 缩小固定大小的框之间的垂直间距以适合父级边界内的列表》

堆栈3和4的Flex-box’中间结果’：

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>

最佳答案 (有关其他一些结果,请参见以下评论)

您可以使用伪元素(：after),它可以帮助您在拥有更多卡时保持堆栈.然后你可以简单地控制这个元素的flex值来控制卡应该收缩多少,因为它将控制这个元素应该占用多少空间：

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