小编aom*_*rks的帖子

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

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