html - 如何在非常小的窗口宽度上使用带有 flex-wrap 的中心元素而不截断它们？

Question

我在 Codepen 上有这段代码：代码

有没有人可以帮助我尝试修复它？我尝试将这样的元素居中：

我的居中元素

然后，当窗口的宽度减小时，将元素一个在另一个之下。

我的第一个想法是结合 flex-wrap、justify-content 和 align-content 属性，如下所示：

    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

但问题是当窗口宽度非常小时，某些元素会被截断：

我截断的元素

我的问题是：如何在不截断某些元素的情况下将元素的居中与 flex-wrap 结合起来？

谢谢您的帮助 ：-）

Answer 1

您正在手动将 设置height为最大值。这就是截断你的元素的原因。

很难确切地说出您要做什么，但是看起来更改height: 350px;为min-height: 350px;仍然可以在桌面上为您提供尽可能多的间距，但在移动设备上让它伸展到正确的高度。

编辑 为了保持 350px 的高度，并且如果您可以在元素堆叠时在元素之间拥有灵活的空间量，请更改：

#container {
  align-content: center;
}

至

.element {
  align-self: center;
}