滚动弹性容器不适合居中的项目[重复]

Posted 2023-03-05

【中文标题】滚动弹性容器不适合居中的项目[重复]

【英文标题】：scrolling flex container does not fit centered items [duplicate]

【发布时间】：2013-11-05 03:18:26

【问题描述】：

html：

<div id="container">
    <div class="item">Foo</div>
    <div class="item">Bar</div>
</div>

CSS：

#container 
    display: flex;
    justify-content: center;
    overflow: auto;

.item 
    flex-grow: 1;
    min-width: 200px;
    max-width: 300px;

当上述容器缩小到小于 400px 时，如预期出现水平滚动条。但是，第一项会被容器的左边缘部分遮挡，即使一直滚动到左侧也是如此。随着容器的缩小，更多的项目被遮挡。

演示：http://jsfiddle.net/FTKcQ/。调整结果框的大小以进行观察。在 Chrome 30 和 Firefox 24 中测试。

如果 justify-content 从 center 更改为任何其他值（例如 space-between），则所有内容都可以通过滚动查看。为什么居中的项目表现不同？

这里的目标是有一行居中的项目，每个项目的宽度都会在一定范围内增长。如果容器不能容纳所有最小宽度的项目，它应该滚动显示它们。

【参考方案1】：

根据MDN (Flex item considerations)，目前预计会出现这种行为：

Flexbox 的对齐属性会“真正”居中，这与 CSS 中的其他居中方法不同。这意味着弹性项目将保持居中，即使它们溢出弹性容器。但是，如果它们溢出页面的顶部边缘或左​​侧边缘，有时这可能会出现问题，因为您无法滚动到该区域，即使那里有内容！在未来的版本中，对齐属性也将扩展为具有“安全”选项。

目前，如果这是一个问题，您可以改为使用边距来实现居中，因为它们会以“安全”的方式做出响应，并在溢出时停止居中。无需使用 align- 属性，只需将自动边距放在您希望居中的弹性项目上。代替 justify- 属性，在 flex 容器中的第一个和最后一个 flex 项的外边缘放置自动边距。

因此，您可以使用边距进行对齐，从而达到预期的效果。只需为第一项添加margin-left: auto，为最后一项添加margin-right:auto。

我的演示：http://jsfiddle.net/WFxQk/

【讨论】：

据我所知，当项目从容器溢出的宽度开始时，这不会使项目居中。元素开始左对齐。

【参考方案2】：

尝试使用样式表

＃容器 背景颜色：绿色； 显示：弯曲； /* justify-content: center */ ; 对齐项目：居中； 溢出：自动； 。物品 背景颜色：白色； 边框：1px纯黑色； 弹性增长：1； 弹性收缩：1； 弹性基础：自动； 最小宽度：200px； 最大宽度：300px； 边距：自动； 我删除了justify-content，将其设为默认flex-start。并且，添加了margin:auto，这似乎使中心对齐。

更新的演示：http://jsfiddle.net/FTKcQ/1/

【讨论】：

罗伯特，谢谢你的好回答！但是，如果我需要在中心查看项目，但不合理，该怎么办？