如何创建Windows资源管理器大缩略图样式列表？

Question

我的目标是创建项目列表，其行为类似于Windows资源管理器大缩略图模式，这是一个示例：

这是另一张图片，显示重新调整窗口大小时的流动性：

所以我看到了这一点并想到了自己，哦，这很容易，我只是设置元素占用特定数量的空间，如20%并设置最小高度和宽度，我得到了这个：

Example

但是当你猜到width: 20%保持这种状态时，结果如下：

这在我的情况下远非理想，因为现在我需要使用 [1] 到 [how many items I want to limit per screen width] 媒体查询来说明项目相对于容器采取不同的%。

我想知道有没有一种聪明的方法可以实现这一点，而无需编写15个媒体查询或一个真正最小的JavaScript实现来处理这个问题？

Answer 1

在CSS3中，您可以使用box-sizing属性并将其设置为＆＃34; border-box＆＃34;。代码通过Paul Irish。

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

当您设置为border-box时，您在元素上设置的宽度（20％）将包含元素的填充和边框，因此20％实际上是20％。默认情况下，使用box-sizing: content-box，您的商品将是20％+填充+宽度（每个大于20％），并且比您预期的更快地回流到下一行。如果您愿意，可以坚持使用默认的大小调整，但是您需要调整百分比以考虑您为元素指定的填充和边框。

检查browser support on caniuse.com。

您还可以使用Flexboxes进行检查，但我认为您的用例不是必需的，并且会进一步限制您可以支持的浏览器。