使用或不使用 flexbox 填充可用空间

Question

在我的 <main> 元素中，我有 div，每个都有 .dataCard 类。每个.dataCard 都有相同的最小尺寸，但是当我开始向.dataCards 添加内容时，我注意到布局表现得很奇怪。

<main> 元素分为两列，每列包含一个 .dataCard。我这样做是因为我需要将.dataCard 的顺序放在左列，然后一个在右列，一个在左列，依此类推。

但是当我用内容填充.dataCards 时，它们会将所有其他卡片推到它们下面。

如何使用.dataCards 填充可用空间，以使包含它们的<main> 元素的高度尽可能小。

现在，在下面的链接中，右栏中有第二张卡片，但随后是一堆空格，第二张卡片的末尾是左栏中的第三张卡片。

如何将左列向上移动，或者换句话说，使卡片适合使用或不使用 flexbox 的可用空间？

我将不胜感激！

Here is the link: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html

Answer 1

根据您的问题，我了解到您想用没有任何空格的框填充整个页面。

This is what, exactly you wanted.