CSS从右下角开始堆叠元素(逐行排列，顺序很重要，元素的宽度不同)

Question

我需要得到的示例：

9 8
7 6 5 4
3 2 1 0

我试过使用

display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;

但我得到的是：

8 9
4 5 6 7
0 1 2 3 

这是不够的，因为排序很重要。我也想到了网格，但由于元素的宽度不同，这不是一个选项。

Answer 1

您应该使用flex-direction: row-reverse：

.container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-start;
flex-direction: row-reverse;
}
.container > div {
width: 20%;
border: 1px solid;
counter-increment: num;
}
.container > div::before {
content: counter(num);
}

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

如果将每个数字放在要选择的元素中，则可以使用cssorder属性。https://www.w3schools.com/cssref/css3_pr_order.asp.

由于投票被否决而进行编辑：我之所以建议这样做，是因为当我读到这个问题时，我认为重点是"秩序很重要"，这意味着秩序很可能在某个时候发生变化，它需要灵活。我脑海中的一个例子：https://jsfiddle.net/nr7vqw2e/.

如果你只是想扭转局面，那么@Caro的回答会让你达到目的。