Question

我想使用flexbox将div子元素放在div容器中。

我希望它们在容器内居中，因此我使用 justify-content：center; 和 align-items：center; 。如果有太多要并排显示，我也希望孩子们换行，所以我使用 flex-wrap：wrap; 和 align-content：center; 。只要所有内容都适合容器内部，一切都按预期工作。

如果窗口非常小，但内容溢出容器并且确实显示滚动条，但第一个子项仍在滚动区域之外。当align-content不是center时，就不会发生这种情况。

它发生在safari，chrome和firefox中，所以我认为它不是一个bug。

知道导致这种情况的原因以及如何解决这个问题？

我还制作了一个代码来说明这一点（使浏览器窗口尽可能小，并滚动到顶部以查看从视图中剪切的第一个子项）： http://codepen.io/SubHero/pen/bpZXzm

HTML：

<div class="parent">
    <div class="child">Child1</div>
    <div class="child">Child2</div>
    <div class="child">Child3</div>  
    <div class="child">Child4</div>  
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
}

.parent {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.child {
  width: 300px;
  height: 200px;
  margin: 20px;  
  background-color: #4caf50;  
}

Answer 1

卸下

align-content: center;

解决了这个问题。

当align-content属性设置为居中时，它会放置弹性项目，使其中心垂直位于同一位置。但是，当窗口很小时，flexbox会将所有元素包装在彼此之下，这意味着flex项目将垂直居中，并且顶部的第一个子项不在视图之外。底部的孩子没有这样做的原因是因为网页自动垂直延伸以适应额外的高度。

使用带有wrap和align-content的flexbox：center溢出父卷外区域

1 个答案: