右下角的 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>