如何将div放在另一个div的顶部，其中所有div都是动态创建的

Question

在此示例中，首先创建框＃1，然后创建＃2，＃3，＃4。

如果框的数量超过父宽度，则下面的框（＃5）必须转到下一行，但我想将其放在上一行中，如图所示。

Answer 1

使用方向设置为flexbox的CSS3 row-reverse模块并将其设置为wrap-reverse

Codepen示例：http://codepen.io/anon/pen/MYMEGE

---

标记

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

CSS

.container {
  margin: 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse; 
}

.container div {
  width: 23%;
  margin: .99%;
  height: 100px;
  background: #d8d9e2;
}