如何将弹性项目与主轴的起点对齐？

Question

我有一组元素，每个元素都有不同的内容。我想在他们的容器上使用display: flex和justify-content: space-around来维持元素之间的均匀空间，并让它们水平填充浏览器窗口。

元素宽度是固定的，但不是高度。行上元素的数量和它们之间的空间量应根据浏览器窗口的水平空间而变化。

e.g。

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

浮动不起作用，因为下一行的项目会在上一行的较高元素旁边浮动。

这基本上是我尝试过的，虽然我现在意识到align-content在横轴上起作用并不是我想要的：

div.flexy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}
div.block {
  flex-basis: 20rem;
}

Demo at CodePen

有没有办法做到这一点？

谢谢。