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

Question

我在 Codepen 上有这段代码:code

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

my centered elements

然后，当窗口宽度减小时，将元素一个接一个地包裹起来。

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

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

但问题是当窗口宽度很小时，一些元素被截断了:

my truncated elements

我的问题是:我怎样才能将元素的居中和 flex-wrap 结合起来而不截断某些元素？

谢谢你的帮助:-)

Answer 1

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

很难确切地说出你想要什么，但看起来将 height: 350px; 更改为 min-height: 350px; 仍然会给你在桌面上任意多的间距，但在移动设备上让它拉伸(stretch)到合适的高度。

编辑为了保持 350 像素的高度，并且如果您愿意在元素堆叠时在元素之间留出灵活的空间量，请更改:

#container {
  align-content: center;
}

到

.element {
  align-self: center;
}