使用 justify-content: space-evenly 时如何不向左溢出

Question

在justify-content: space-evenly 的网格布局中，当列​​共同宽于容器时，内容居中并左右溢出。我希望它向左对齐并且仅在右侧溢出（就像space-between 的情况一样）。

space-evenly:https://jsfiddle.net/78yv9uhp/5/

space-between:https://jsfiddle.net/78yv9uhp/6/

这在向容器添加滚动条（如overflow: auto）时尤其明显。右侧的内容可以滚动到，但左侧溢出的内容仍然无法访问。

这是预期的行为吗？有没有办法让内容在溢出时左对齐？

Answer 1

我发现CSS specs 描述了“后备对齐”，以防无法应用间距。对于space-between，这是start，而对于space-evenly，这是center，不幸的是。这解释了观察到的重叠差异。

不过，规范中也提到了

此模块的未来级别可能允许明确指定回退对齐方式。

所以也许随着时间的推移，我们可以将回退设置为start。

直到那时我才找到解决方法：在容器上设置 min-width。为避免过宽，请将容器包裹在滚动的父元素中。 Demo here.

Answer 2

如果我理解正确，可以通过justify-content: left实现

一个例子：

body {
  padding: 1rem 3rem;
}
* {
  box-sizing: border-box;
}
#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: 10px;

  justify-content: left;
  overflow: auto;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}

<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

更新：

此外，您可以删除justify-content 属性。感谢@doğukan 和@Mr t

一个例子：

body {
  padding: 1rem 3rem;
}
* {
  box-sizing: border-box;
}
#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: 10px;

  justify-content: left;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}

<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

更新 1：

如果overflow: auto时的列间距应该相同，那么我们可以为padding和grid-gap设置相同的值。

一个例子：

body {
  padding: 1rem 3rem;
}

* {
  box-sizing: border-box;
}

#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: .75em;

  justify-content: space-evenly;
  overflow: auto;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}

<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>