Html 在一个div内的同一行上显示4个框

我试图在页面底部创建一个“流行产品”栏。 以下是一个例子：

但是，我遇到了一个问题，即多个div不出现在同一行上。我读过不同的方法，包括display:inline block（到处都说这是个坏主意）、display:table cell（这仍然在创建新行），以及将span与display:inline block一起使用（也仍然在创建新行）。我还尝试删除.productbox类中的“display”，它根本不显示框

以下是我的productbox的代码：

.productbox {
width: 168px;
height:135px;
display:inline-block;
background-color: #b2b2b2;    
}

使用如何？下面是HTML和CSS

.wrapper
{
显示器：flex；
}
.包装部
{
宽度：100px；
高度：100px；
背景颜色：蓝色；
利润率：10px；
}

第一组
第2组
第3组
第4组

您需要添加正确的前缀，以便跨浏览器执行此操作。。。检查