如何调整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/