flex-flow:以反向顺序html和css的row-reverse wrap-reverse

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>

订单应该颠倒过来.请不要使用'order'属性来回答这个问题.像这样的图像(抱歉编辑错误):

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

Answer 1

一种可能的方法是使用 JS 通过使用模数（如下面的代码片段所示）来计算第一个元素应具有的左侧边距。

const offset = document.querySelectorAll('.a .b').length%4;
const width = 120 + 5; //min-height + margin, it's probably better to calculate this value.
document.querySelector('.a .b').style.marginLeft = `${width*offset}px`;

.a {
  height: 200px;
  width: 520px;
  padding: 5px 5px 5px 10px;
  display: flex;
  flex-wrap: wrap;
  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>