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 item considerations)，现在预计会出现这种情况：

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

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

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

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

Answer 2

尝试使用样式表

    #container {
        background-color: green;
        display: flex;
        /* justify-content: center */ ;
        align-items: center;
        overflow: auto;
    }
    .item {
        background-color: white;
        border: 1px solid black;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        min-width: 200px;
        max-width: 300px;
        margin: auto;
    }

我删除了justify-content，将其设为默认flex-start。并且，添加margin:auto似乎它使中心对齐。

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

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

2 个答案: