问题描述
我正在尝试使用 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
我怎样才能做到这一点?
解决方法
我觉得在几分钟内弄清楚我自己的问题有点愚蠢,虽然提前几个小时在这个问题上磕磕绊绊,但我正在查看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;
}
希望能帮到别人!