flex-flow: обратный перенос строки в обратном порядке html и 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>

Порядок следует изменить.Пожалуйста, ответьте на это, не используя свойство 'order'.Примерно как это изображение (извините за плохое редактирование):

Пожалуйста, сначала посмотрите вывод кода, затем изображение.

Answer 1

Мы можем использовать Количество запросов для реализации этого макета ( 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, что означает:

'выберите первого ребенка, если это также ребенок 4n + 2 от последнего ребенка.'

Демонстрация Codepen

Answer 2

Возможный способ сделать это - использовать 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>