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

问题描述

当内容溢出flex容器，且容器未设置为允许包装时，Chrome似乎不能正确处理 justify-content：space-around ，而是水平滚动。

一些内容溢出在flex容器的左侧，并被切断。

这里是一个例子：

  #container {display：flex; width：500px; justify-content：space-around;边框：实心黑色; 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>   

解决方案

由于容器的宽度有限， scrolling，why use justify-content：space-around ？

：flex-start ：

修订的Codepen

要了解为什么可能无法通过滚动访问溢出的flex项目，请参阅 this answer 。

如果您对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

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