html - 如何调整 flex 容器内的 n 个 div

Question

我有以下笔:

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

它试图做的是调整许多 div主容器周围的元素。但是，我想以一种方式实现这一点，即在将一定数量的 div 放置在同一行后，将其他 div 推到底部，以便每个 div 和其中的内容都有足够的空间，而不是像困惑。 我有一幅绘画图试图展示我想要完成的事情:

我希望它们根据需要拉伸(stretch)，具有相同的高度(将主容器设置为 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/