如何调整flex容器中的n个div数量

Question

我有以下笔：

http://codepen.io/yisera/pen/eNprye

它尝试做的是调整主容器周围的许多div元素。但是，我希望以这样的方式实现这一点：在将一定数量的div放在同一行之后，将其他div推到底部，这样每个div都有足够的空间，并且它们内部的内容不会像堆栈一样堆叠一塌糊涂。 我有一个绘图画试图展示我想要完成的事情：

我希望它们尽可能伸展，具有相同的高度（在将主容器设置为display: flex;时实现）但是我如何才能实现它，以便当有足够的div个元素时没有内容太杂乱的第一行，他们会进入第二行，如上图所示？我一直在努力做到这一点，但到目前为止，flex只会甩掉其他div元素并在它们旁边堆叠更多。

提前致谢！

Answer 1

试试这个样本：

.main-container {
  display: flex;
  flex: 1;
  margin: 0;
  flex-wrap: wrap-reverse;
}

.note {
  display: inline-block;
  padding: 10px;
  border: 2px solid #333;
  background-color: #3498db;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

PS：在此处了解有关flex模型的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/