无论高度如何，如何使盒子最左对齐

Question

我正在尝试创建具有动态高度的等宽卡片布局。对于台式机，我希望这些卡占用窗口宽度的1/8：

.card {
    width: 12.5%;
    float: left;
}

我让这些卡向左浮动，以便它们堆叠到左侧。这非常适合第一行，但是第二行项目在碰到窗口左侧之前会碰到最高的.card项目。例如，第二行中的第一个.card碰到第一行中的第四张卡片，尽管它正确地坐在上面卡片的底部，但并没有一直向左移动的窗口。

我还尝试将容器设置为flex。这似乎可行，但是我认为需要一些JavaScript才能正确呈现：

.card-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 0 12.5%;
}

.card .last-row {
    flex-grow: 0;
    margin-top: [set this custom for each card with javascript]
}

使用flex时，项目会按预期排列，但是我将不得不进入并调整每张卡的margin-top（或某种y变换），以使其平齐反对上面的卡。我认为这可以解决问题，但是有更好的解决方案吗？