滚动弹性容器不适合居中的项目

Question

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),则通过滚动可以看到所有内容.为什么居中的项目表现不同？

这里的目标是有一排居中的项目,每个项目的宽度将在某个范围之间增长.如果容器无法容纳所有最小宽度的项目,则应滚动以显示所有这些项目.

Answer 1

根据MDN(Flex项目注意事项),此行为现在是预期的:

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

现在,如果这是一个问题,你可以改为使用边距来实现居中,因为它们会以"安全"的方式响应并且如果它们溢出则停止居中.而不是使用对齐属性,只需将自动边距放在您希望居中的弹性项目上.而不是对齐属性,将自动边距放在flex容器中第一个和最后一个flex项的外边缘上.

因此,您可以使用边距进行对齐来实现预期的结果.只需添加margin-left: auto第一项和margin-right:auto最后一项.

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

Answer 2

尝试使用样式表

    ＃容器 {
        背景颜色：绿色；
        显示：弹性；
        /* 对齐内容：居中 */ ;
        对齐项目：居中；
        溢出：自动；
    }
    。物品 {
        背景颜色：白色；
        边框：1px纯黑色；
        弹性增长：1；
        弹性收缩：1；
        弹性基础：自动；
        最小宽度：200px；
        最大宽度：300px；
        保证金：自动；
    }
    

我删除了justify-content，使其成为默认值flex-start。并且，补充margin:auto说它似乎使中心对齐。

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