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

Posted 2023-03-05

【中文标题】使用 justify-content: space-evenly 时如何不向左溢出

【英文标题】：How not to overflow on the left when using justify-content: space-evenly

【发布时间】：2021-07-10 16:22:14

【问题描述】：

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

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

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

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

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

【问题讨论】：

您是否有理由需要使用justify-content: space-evenly？

是的，为了美观。内容是动态的（视口的宽度不同）。很多时候内容很合适，我喜欢均匀地间隔列。有时内容太多，或者访问者的窗口很小。然后我不希望内容对他们隐藏。

不能为小屏幕重新定义网格模板吗？

【参考方案1】：

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

不过，规范中也提到了

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

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

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

【参考方案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>

【讨论】：

如果你删除 justify-content 你会得到同样的结果

@doğukan 是的，你是对的。我已经更新了我的回复。谢谢！

我还是用space-between吧？

@Paul 是的。您可以使用space-between。我无法重现您所描述的错误。

@Paul 我刚刚更新了我的答案。如果我理解正确，也许它会对你有所帮助