如何在下一行显示绝对的flexbox项目？

Question

我使用Wordpress CMS并显示我的文章，如小部件。这些小部件使用类main包装，该类具有display:flex属性。

在每个小部件启动之前，我有一个div-container，类标志为position: absolute;。这应该显示从小部件左上角开始的标志。

但由于该标志设置为绝对，因此该标志会显示在上一个小部件框的末尾，并且不会显示在下一行中。

http://jsfiddle.net/n2ft97nw/3/

Answer 1

第一条评论是在正确的道路上。您需要做一些事情。是的，旗帜需要绝对定位，但相对于什么？旗帜所属的文章。所以这就是：

1. 将每个标记放在它所属的<article> div中。
2. 将<article>设置为position: relative;
3. 使用CSS位置属性定位标志： top: 0;和left: -3px;抵消文章的边界。

请在此处查看更新的小提琴：http://jsfiddle.net/n2ft97nw/7/