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

Question

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

.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>

顺序应该颠倒过来。请在不使用“订单”属性的情况下回答这个问题。像这样的图片(抱歉编辑不好):

请先看代码输出再看图片。

Answer 1

我们可以利用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 ，则选择第一个 child 。'

Codepen demo