反向div顺序多行

Reverse div order multiline

我正在尝试使用 CSS 获得以下结果。

我希望第一个 div 从右下角开始。当添加第二个 div 或第三个 div 时,它需要将自己放在左侧前一个 div 旁边,如下所示:

| div 3 | div 2 | div 1

考虑使用包装器 div 包装 div 之后的下一个 div(div 4、5 和 6)。通常,divs 会随着文档的流向而变化,并位于前三个 divs 之下。我想要反过来,像这样:

                | div 7
| div 6 | div 5 | div 4
| div 3 | div 2 | div 1

我怎样才能做到这一点?

我觉得在几分钟内解决我自己的问题有点笨,而事先在这个问题上绊倒了几个小时,但我正在查看 flex-wrap: wrap-reverse。换行在这里很重要。使用以下代码,结果实际上非常简单:

  .container {
    width: 700px;
    margin: 0 auto;
    border: 1px solid coral;

    display: flex;
    flex-direction: row-reverse;
    align-content: end;
    flex-wrap: wrap-reverse;
}

希望能帮到别人!