Question

我正在尝试将动态添加的项目放入一定高度的flex div中。例如，我的容器div的宽度为100％，高度为25vh，我在其子容器中加载了50张图片。我希望这些容器相应地调整大小并适合该div，并保持在其中，每行6-7个子div。到目前为止，当我使用flex-grow：15％的值并将它们移到新行时，它们根本不会调整大小，并且不会重叠在外部，即div的移动。有什么办法可以使它工作？

这是我的工作：

<div class="brand-container">
   <div class="tier-top-1">

      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>
      <div class="tier-item">
         <img src="cat.jpg" />
      </div>

   </div>
</div>

和CSS：

.brand-container {
    width: 100%;
    height: 100vh;
}

.tier-top-1 {
    width: 100%;
    height: 25vh;
    background: white;
    display: flex;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tier-item {
    margin: 1rem;
    justify-self: center;
    text-align: center;
    flex: 1 1 15%;
}

.tier-top-1 img {
    max-height: 20vh;
}

Answer 1

要保证边距加上图像的高度，每行只有6或7张图像，您需要能够使用JavaScript进行计算，以将每张图像的最大高度设置为25vh减去行之间的空间，该差除以行数。

我将图像的flex值调整为String，并将页边距调整为0 0 13vw。您可能还需要针对各种情况计算此数字。

请参见下面的代码段。单击“整页”以查看解决方案。否则，margin-top单位将根据您的浏览器的高度而不是摘要窗口的高度来计算。

vh

const imgs = document.querySelectorAll(".tier-top-1 img");
const numImgs = imgs.length;
const rows = Math.ceil(numImgs / 7);
const maxHeight = (25 - rows - 1) / rows;
imgs.forEach(img=> img.style.maxHeight = maxHeight + "vh");

.brand-container {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
}

.tier-top-1 {
    box-sizing: border-box;
    width: 100%;
    height: 25vh;
    background: white;
    display: flex;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border: 1px solid black;
}

.tier-item {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    margin-top: .5vh;
    align-self: center;
    text-align: center;
    flex: 0 0 13vw;
}

.tier-top-1 img {
    max-height: 13vw;
}

在一定高度Div内安装Flex物品

1 个答案: