反转 div 顺序多行答案

【问题标题】：Reverse div order multiline反转 div 顺序多行
【发布时间】：2021-04-07 08:43:07
【问题描述】：

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

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

| div 3 | div 2 | div 1

考虑使用一个包装器 div 来包装 div 之后的下一个 div（div 4、5 和 6）。通常，这些 div 会随着文档的流动而进入前三个 div 之下。我想反过来这样：

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

我怎样才能做到这一点？

【问题讨论】：

标签： css flexbox css-grid masonry

【解决方案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;
}

希望能帮助别人！

【讨论】：