滚动flex容器不适合居中的项目 [英] scrolling flex container does not fit centered items

问题描述

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时，水平滚动条显示为预期。但是，即使一直滚动到左侧，第一项也会被容器的左边缘部分遮挡。随着容器的收缩，更多物品被遮盖。

When the above container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item becomes partially obscured by the left edge of the container, even when scrolled all the way to the left. As the container shrinks, more of the item is obscured.

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

Demo: http://jsfiddle.net/FTKcQ/. Resize result frame to observe. Tested in Chrome 30 and Firefox 24.

如果正当内容的中心位置已从更改到任何其他值（例如 space- c之间），则所有内容均可通过滚动看到。为什么居中项的行为会有所不同？

If justify-content is changed from center to to any other value (e.g. space-between), then all content is visible by scrolling. Why do centered items behave differently?

此处的目标是要有一排居中项，每行居中项的宽度将在一定范围内增长。如果容器不能容纳所有最小宽度的项目，则应滚动以全部显示。

The goal here is to have a row of centered items, each of which will grow in width between some range. If the container cannot fit all minimal-width items, it should scroll to display them all.

推荐答案

根据 MDN（Flex项目注意事项），目前，此行为是预期的：

According to MDN (Flex item considerations), this behavior is expected for now:

Flexbox的对齐属性执行 true操作。居中，这与CSS中的其他居中方法不同。这意味着即使弹性项目溢出弹性容器，弹性项目也将保持居中。但是，如果它们超出了页面的顶部边缘或左​​侧边缘，则有时会出现问题，因为即使有内容，您也无法滚动到该区域！在将来的版本中，对齐特性将被扩展为具有安全特性。

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge, as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well.

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

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.

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

So, you can achieve then expected result, using margins for alignment. Just add margin-left: auto for first item and margin-right:auto for last.

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

这篇关于滚动flex容器不适合居中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！