在所选项目的flexbox行后显示全宽Div

Question

我使用Angular ui-router导航 pages 和flexbox作为网格类型解决方案。我正在尝试重现Google图片搜索结果外观，黑色展开div在所选图像下打开。当我选择了我工作的图像时，我还需要改变路线。然而div在行中的所有div之后打开。现在在所选项目所在的行之后。任何有助于我这样做的 ng-if ，指令或脚本的帮助将不胜感激。

编辑：在考虑之后我想我需要一个脚本/指令来检测选定行中的div，然后在行之后插入ui-view div。

这是我到目前为止所做的：

HTML：

<div id="container">
    <a ng-repeat="item in professionals | filter:{cat: cat} | filter:query" 
       ui-sref="bids.item({item: item.link})"
       ui-sref-active-eq="selected">
       <div>
              ...
       </div>
     </a>
    <div ui-view></div>
</div>

CSS makes div a flex element and wraps the square `a` divs contained.

点击时打开的部分包括：

<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">