15

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），则所有内容通过滚动可见。为什么居中的项目表现不同？

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

4

2 回答 2

26

根据MDN（弹性项目注意事项），目前预计会出现这种行为：

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

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

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

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

于 2014-07-10T13:49:18.320 回答
6

尝试使用样式表 

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

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

于 2014-01-14T12:07:26.010 回答