如何在 CSS 中的居中项目之间添加恒定空间？ （已编辑）

Question

这似乎是一个常见的问题，但我觉得我完全被困住了。

所以我想创建一个网站，其中一部分在一个容器中有两个元素：标题文本和一个按钮。我想把它们放在主轴（容器）的中心，它们之间有一些空间。我不喜欢justify-content: space-around 选项，因为它在中间留下了太多空间。所以要做到这一点，我会为每个元素使用左/右边距。但我也想使用flex-wrap: wrap;，这意味着如果屏幕尺寸太小而无法容纳两个元素，css 会将按钮转移到下一行。然而，每次发生这种情况时，margin-left 仍然保留在按钮上，因此它看起来偏离中心。 （见图）The elements were centered, but when I shrink the window, this is what happens

有什么想法吗？谢谢。

编辑：使用媒体查询会把事情搞砸，所以我的新问题是：有没有办法让两个居中元素之间的空间在所有屏幕尺寸上保持不变而没有边距？

Answer 1

您只能使用 CSS 媒体查询为更大的屏幕尺寸设置边距

Answer 2

您可能正在寻找 justify-content: space-evenly 与 text-align: center、align-items: center 和 flex-wrap: wrap 的组合。这会将内容均匀地分开，同时当视口不够宽以容纳两个元素时，允许它在没有任何边距的情况下环绕。

.container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
  border: 1px solid black;
  height: 100px;
  /*max-width: 80px;*/ /* Turn on to see the wrap */
}

.content {
  flex: 1;
}

<div class="container">
  <div class="content">content</div>
  <div class="content">content</div>
</div>