如何在for循环中从左到右和从右到左顺序放置div？

Question

我正在尝试在for循环中以zig zag顺序对齐div。 所以在第五个div我需要包装div并从右到左开始......

如何根据窗口宽度实现此目的？

Answer 1

这样的东西？

.container {
  width: 200px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.row:not(:last-child) {
  margin-bottom: 0.5rem;
}

.row:nth-child(odd) {
  flex-direction: row;
}

.row:nth-child(even) {
  flex-direction: row-reverse;
}

.row>div {
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 50%;
}

<div class="container">
  <div class="row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="row">
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
  <div class="row">
    <div>11</div>
  </div>
</div>