仅当它们在同一行时 span 元素之间的 CSS 间距

Question

我有一组跨度，每个跨度都有“空白：nowrap”以保持它们单独不中断。如果它们在一行上彼此相邻，我希望它们有一些视觉间距将它们分开，但是如果浏览器决定换行，我不需要或不希望在行的末端有左边距或右边距。

例如：

<div class="container">
   <span id="s1">User Option 1</span>
   <span id="s2">User Option 2</span>
   <span id="s3">User Option 3</span>
   <span id="s4">User Option 4</span>
   <span id="s5">User Option 5</span>
   <span id="s6">User Option 6</span>
   <span id="s7">User Option 7</span>
   <span id="s8">User Option 8</span>
</div>

在宽大的窗口中，我想看看：

User Option 1 ________ User Option 2 ________ User Option 3 ________ User Option 4
User Option 5 ________ User Option 6 ________ User Option 7 ________ User Option 8

（我提供了下划线字符来显示我想要一些空格/填充/边距的位置。我不想看到下划线，我想要一些间距。）

但我只希望间距在需要时，并且当项目集在不同点包装时它继续表现良好。所以，如果窗口有点窄：

User Option 1 ________ User Option 2 ________ User Option 3
User Option 4 ________ User Option 5 ________ User Option 6
User Option 7 ________ User Option 8

或者更窄：

User Option 1 ________ User Option 2
User Option 3 ________ User Option 4
User Option 5 ________ User Option 6
User Option 7 ________ User Option 8

我知道如果我只给所有内容留出一个边距，那么在所有内容的左侧都会保留不需要的空间：

________ User Option 1 ________ User Option 2 ________ User Option 3
________ User Option 4 ________ User Option 5 ________ User Option 6
________ User Option 7 ________ User Option 8

如果我在 :not:first-child 选择器中提供 margin-left，它实际上看起来有点糟糕：

User Option 1 ________ User Option 2 ________ User Option 3
________ User Option 4 ________ User Option 5 ________ User Option 6
________ User Option 7 ________ User Option 8

如果我切换到右边距，一切看起来都很好：

User Option 1 ________ User Option 2 ________ User Option 3 ________
User Option 4 ________ User Option 5 ________ User Option 6 ________
User Option 7 ________ User Option 8 ________

因为您看不到不需要的右边距。

但是仍然有一个抱怨的原因是这些元素保留了右边的空间，因此它们会比必要的更快地“自动换行”，所以它们仍然具有浪费空间的不需要的特性右边。

CSS 中有没有什么东西能真正说出我想说的话？

通俗地说，我会说：“margin-right-if-sibling-rendered-to-my-right”？

Answer 1

CSS Grid 解决了边距空间/环绕问题。

您可以使用以下属性在网格项目之间创建分隔：

• grid-row-gap
• grid-column-gap
• grid--gap（上述两个属性的简写）

这些属性在项目之间创建空间，但从不在项目和容器之间创建空间。

jsFiddle demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
  border: 1px dashed black;
}

span {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="container">
  <span id="s1">User Option 1</span>
  <span id="s2">User Option 2</span>
  <span id="s3">User Option 3</span>
  <span id="s4">User Option 4</span>
  <span id="s5">User Option 5</span>
  <span id="s6">User Option 6</span>
  <span id="s7">User Option 7</span>
  <span id="s8">User Option 8</span>
</div>

然后，如果您希望容器和项目之间有空间，请在容器中添加填充。

jsFiddle demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding: 10px;  /* added */
  border: 1px dashed black;
}

span {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div class="container">
  <span id="s1">User Option 1</span>
  <span id="s2">User Option 2</span>
  <span id="s3">User Option 3</span>
  <span id="s4">User Option 4</span>
  <span id="s5">User Option 5</span>
  <span id="s6">User Option 6</span>
  <span id="s7">User Option 7</span>
  <span id="s8">User Option 8</span>
</div>

更多细节在这里：

• Removing margin from flex items when they wrap
• Equal width flex items even after they wrap

Answer 2

我认为对于所描述的特定布局，使用CSS Grid 比flexbox 更合适。我们来看看它是如何渲染布局的：

• 我们使 父容器 (grid-container) 具有display:grid 属性。
• 我们 justify the contents 使用 space-between 使网格项处于其末端（与 flexbox 不同，当空间可用时，网格项不会浮动到最右侧）。
• 我们将模板列定义为固定宽度，之后它将折回到下一行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: space-between;
  text-align: center;
}

.grid-container>* {
  background-color: gray;
  color:white;
  border:2px solid black;
  margin:2px 0px 2px 0px;
}

<div class="grid-container">
   <span id="s1">User Option 1</span>
   <span id="s2">User Option 2</span>
   <span id="s3">User Option 3</span>
   <span id="s4">User Option 4</span>
   <span id="s5">User Option 5</span>
   <span id="s6">User Option 6</span>
   <span id="s7">User Option 7</span>
   <span id="s8">User Option 8</span>
</div>