css - 是否可以为行反转设置 flexbox 流，但最后一项从右上角开始？

Question

这是一个关于 CSS flexbox 的高级问题。我有以下代码:

#container {
  display: flex;
  width: 90px;
  flex-flow: wrap;
}

#container button {
  width: 27px;
  height: 27px;
}

<div id="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

它看起来像这样:

假设是，1到9是电脑生成的，不能修改，不能做成9到 1。

有了上面的限制，现在使用CSS Flexbox，是否可以做到:

如果我只是将上面的 flex-flow 行更改为:

flex-flow: wrap row-reverse;

它变成了:

它没有完成这项工作。 要求是:流向是否与元素反向，从右上角开始？

我可以将 flexbox 更改为包含 3 行，并相应地设置它们的样式，或者，我可以将 HTML 中的数字从 9 变为 1，但是如果我们不能那样做，但是有使用当前的 HTML 结构和纯 CSS flexbox 样式使其工作？

Answer 1

只能使用“wrap-reverse”实现。

见下文

#container {
  display: flex;
  width: 90px;
  flex-flow: wrap-reverse;
 
}

#container button {
  width: 27px;
  height: 27px;  
}

<div id="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>