html - flex-flow :row-reverse wrap-reverse in reverse order html and css

我有一个内容，我希望它们以行反转和换行反转但顺序相反。
这是代码:

.a {
  height: 200px;
  width: 520px;
  padding: 5px 5px 5px 10px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: black;
}

.b {
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  background-color: aquamarine;
}

<div class="a">
  <div class="b">1</div>
  <div class="b">2</div>
  <div class="b">3</div>
  <div class="b">4</div>
  <div class="b">5</div>
  <div class="b">6</div>
</div>

顺序应颠倒。
请在不使用“订单”属性的情况下回答此问题。
像这样的图片(对不起，编辑不正确):



请先查看代码输出，然后再查看图像。

最佳答案

我们可以使用Quantity Queries来实现此布局(不需要js!)

演示代码段:

ul {
  list-style: none;
  min-height: 90px;
  width: 500px;
  padding: 5px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
}
li {
  display: inline-block;
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: aquamarine;
}
li:nth-last-child(4n + 3):first-child {
  margin-left: 125px;
  background-color: pink;
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px;
  background-color: blue;
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px;
  background-color: green;
}
li:nth-last-child(4n):first-child {
  background-color: purple;
}

<ul>
  <li>1</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

解释:

这里所需的布局本质上可以归结为常规的四列从左到右的布局，其中第一个元素根据容器中有多少个物品缩进。

当有4n个元素(4、8、12等)时-不需要缩进。

当有4n +1个元素(1、5、9等)时-需要三个元素的缩进。

如果有4n + 2个项(2、6、10等)，则需要两个元素的缩进。

如果有4n + 3个项(3、7、11等)，则需要一个单项缩进。

相关CSS:

li:nth-last-child(4n + 3):first-child {
  margin-left: 125px; /* one-item indentation */
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* two-item indentation */
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px; /* three-item indentation */
}
li:nth-last-child(4n):first-child {
  /* no indentation */
}

为了理解这一点，让我们使用OP的示例:

说有6个元素。我们需要对第一项应用两个元素的缩进。

选择器将是:

li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* 250 = 2 * 120 (item width) + 2 * 5px gap */
}

有趣的是:nth-last-child(4n + 2):first-child，这意味着:

“如果第一个 child 也是最后一个 child 中的4n + 2个 child ，请选择它。”

Codepen demo