在一定高度分区内安装柔性项目

Question

我正在尝试将动态添加的项放入某个高度的flexdiv中。例如，我的容器div是100%宽和25vh高，我有50个图像加载在它们的子容器中。我希望这些容器相应地调整大小，并适合该div，保持在其中，每行6-7个子div。到目前为止，当我使用flex growt: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值调整为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 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>