为什么 space-around 允许 flex 项目在左侧溢出? [英] Why does space-around allow flex items to overflow on the left side?

问题描述

当内容溢出 flex 容器时，Chrome 似乎没有正确处理 justify-content: space-around，并且容器没有设置为允许环绕，而是水平滚动.

flex 容器左侧部分内容溢出，被截断.我希望它在右侧溢出，以便我可以通过水平滚动到达它.

这是一个例子:

#container {显示:弹性；宽度:500px；justify-content:空间环绕；边框:纯黑色；溢出:自动；}.物品 {最小宽度:200px；边距:10px；背景颜色:红色；显示:表；字体大小:48pt；文本对齐:居中；}

<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>

解决方案

既然容器的宽度有限，并且您希望通过水平滚动访问溢出的弹性项目，为什么使用 justify-content: space-around?

试试 justify-content: flex-start:

修订后的 Codepen

要了解为什么无法通过滚动访问溢出的弹性项目，请参阅此答案.

如果您对原始代码的 Javascript 解决方法感兴趣，请参阅此帖子:

• 水平居中时，li 被切断

It seems that Chrome doesn't handle justify-content: space-around correctly when the content overflows the flex container, and the container is not set up to allow wrapping, but instead horizontal scrolling.

Some of the content overflows on the left side of the flex container, and is cut off. I want it to overflow on the right side, so that I can reach it by scrolling horizontally.

Here is an example:

#container {
  display: flex;
  width: 500px;
  justify-content: space-around;
  border: solid black;
  overflow: auto;
}
.item {
  min-width: 200px;
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}

<div id="container">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>

解决方案

Since the container is limited in width and you want overflowing flex items to be accessed via horizontal scrolling, why use justify-content: space-around?

Try justify-content: flex-start:

Revised Codepen

To understand why overflowing flex items may be inaccessible via scroll, see this answer.

If you're interested in a Javascript workaround for the original code, see this post:

• When centering horizontally, li's get cut off

这篇关于为什么 space-around 允许 flex 项目在左侧溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！