如何使Flexbox显示像游戏库存

Question

我的目标是这样的：

规则：

• 项目之间的水平差距是固定的，称为x
• 项目之间的垂直间隙是固定的，称为y
• 最左边的项目和flexbox的边框之间的差距与最右边的项目和flexbox之间的差距相同，称为z
• x，y，z分别设置。它们可能不同。
• 从左到右，然后从上到下列出项目
• 保持底部填充＆gt; =顶部填充。如果超出，则隐藏溢出部分并使其可滚动（不是系统滚动条）。

我尝试了一些方法，这是我目前的代码

content #ItemPane {
    height:100%;
    background:#a0d4e5;
    padding:1vh;
    border:1px solid blue;
}

    content #ItemPane .PanelContentWrapper {
        width:100%;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }

        content #ItemPane .Slot {
            width:6vh;
            height:6vh;
            margin:1vh;
            background:black;
        }

因此：

https://jsfiddle.net/h4ww9erj/

最大的问题是，当左侧对齐列出项目时，我无法使左右填充相同。

我的解决方案/解决方法：

• 动态设置js中项目之间的差距
• 此布局的表格

有更好的想法吗？

至于滚动和底部填充问题，我想到的唯一方法是我必须有一个中间包装器，因为我已经写过，并自定义我自己的滚动系统（例如捕获鼠标/触摸偏移并将其转换为滚动偏移并将包装器移动到相应的位置。）

还有其他建议吗？