html - 如何正确居中这些项目？

我在这里有代码，但基本上问题是我有这些产品卡，我试图将它们放在中心，但如果有意义的话，也将它们与其他卡对齐。

这是我想要完成的事情与实际发生的事情的视觉效果。起初看起来不错，直到您尝试调整它的大小。

我试图让鸡尾酒容器的值为 flex-start 而不是 center 的 justify-content 属性，像这样

#cocktails-container {
  max-width: 70%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

但是当我调整它的大小时，它会在右侧留下很多空白。我尝试过使用 inline-block 并改用 text-align ，但这也不起作用。

标签： htmlcssflexbox

添加此代码。

#cocktails-container::after {
  content: "";
  flex: auto;
}