Javascript 创建均匀分布且具有流行为的仪表板

我正在尝试为web应用程序构建仪表板。要求此屏幕以以下方式响应客户端屏幕：

仪表板应在一行中容纳4个小部件（大小相同）。小部件应该均匀地分布在整个屏幕上

当屏幕的最小尺寸不允许显示所有窗口小部件（它们之间的空间最小）时，那些不适合的窗口小部件应继续到下一行（流）

---

现在我看到了这一点，它回答了第一个定义，但我找不到一种方法来用第二个想法来强制它的流行为。有人知道怎么做吗

你需要给你的小部件一个

宽度

和

高度

，让它们

显示：内联块

：

HTML:

---

.

您有机会尝试一下，请在这里分享您的源代码？

<div class="widget">One</div>
<div class="widget">Two</div>
<div class="widget">Three</div>
<div class="widget">Four</div>

.widget {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: 2px;
    display: inline-block;
}