在特定高度 Div 内安装 Flex 项目答案

【问题标题】：Fitting Flex Items inside certain height Div在特定高度 Div 内安装 Flex 项目
【发布时间】：2019-04-30 19:13:08
【问题描述】：

我正在尝试将动态添加的项目放入某个高度的 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;
}

【问题讨论】：

好问题。您能解释一下您希望扩展哪个容器吗？您是否希望图像变得非常小并适合 25vh div 或者您是否希望 25vh 容器增长？
是的，我需要图像越来越小，因为它们越来越多，每行添加大约 6-7 个，父容器保持固定的高度和 100% 的宽度。
随着边距数量加上图像高度的影响，每行只有 6 或 7 张图像，您需要能够使用 JavaScript 运行计算以设置 max-height 的每个图像为25vh 减去行之间的空间，该差除以行数。

标签： html css flexbox

【解决方案1】：

随着边距量加上图像高度的影响，每行只有 6 或 7 张图像，您需要能够使用 JavaScript 运行计算，将每个图像的最大高度设置为 25vh 减去行间距，该差除以行数。

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

请参阅下面的 sn-p。单击整页以查看解决方案。否则，vh 单位将根据浏览器的高度计算，而不是 sn-p 窗口的高度。

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 class="brand-container">
   <div class="tier-top-1">

      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>
      <div class="tier-item">
         <img src="https://via.placeholder.com/400x400/?text=Image" />
      </div>

   </div>
</div>

【讨论】：

我不擅长 JS，正在寻找 CSS 解决方案。但是您的脚本完美地完成了这项工作，而且它也很灵活。非常感谢！
没问题。如果我们知道图片容器的确切数量，我们可以设计一个纯 CSS 的解决方案，但是由于您提到它们是动态添加的，我们需要利用 JS 来帮助我们。如果您提前知道确切的行，您可以使用其中的 css calc() 函数来设置 max-height。 max-height: calc((25vh - 8vh) / 7)