CSS实现inline-block元素换行孤行控制 平衡各行元素排布

页面中有一系列设置为inline-block的div元素，这类元素会根据当前浏览器视口宽度自动换行排列：

• 视口宽度适配时，元素会均匀分布在各行，排布整齐。
• 当视口宽度处于特定区间时，会出现仅单个inline-block元素孤立排在下一行的情况，视觉协调性较差。

需要找到可实现孤行控制的CSS方法。特别说明：原生CSS的orphan属性并不适用于该场景，预期实现效果为：当最后一行的元素数量少于指定阈值时，自动将更多元素调整到下一行，使各行元素排布更均衡。

对应的示例代码如下：

样式代码

.container {
    width: 100%;
}

.item {
    display: inline-block;
    width: 50px;
    background-color: blue;
}

结构代码

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
</div>

内容的提问来源于stack exchange，提问作者Timothy R. Butler