将 Flex Grid 扩展到容器？

如何解决将 Flex Grid 扩展到容器？

我正在尝试创建一个画廊。这将有可变数量的项目；我需要它来适应浏览器视口，所以画廊中的项目应该能够灵活缩放。感觉应该是一个简单的努力？

现在，我的 DOM 如下所示：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

附带 CSS：

.parent {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 1 auto;
}

当我达到一定数量的孩子时，他们只会溢出父级。我希望他们缩放他们的高度/宽度，以便他们适合父母。当我只有几个（1-3）个孩子时，我希望他们也能适应它。 flex: 1 1 auto 肯定就足够了吗？

CSS 网格方向错了吗？使用 Grid 会更好吗？

解决方法

你有没有试过用宽度设置宽度？例如width:33.33% 或许这是一个有趣的效果？

,

我让它以我想要的方式工作，使用网格。在我的应用程序中，根据库中项目的数量，我将使用 JavaScript 修改网格列的数量；我在笔中省略了这一点。

使用网格，我使用了 grid-template-columns: repeat($num,1fr);。我还使用了 grid-auto-rows: minmax(auto,100px); 来确保行适合屏幕。

这里有一支笔可以更好地解释它：https://codepen.io/hjfitz/pen/LYxJWQe