Angular 在弹性项之间显示一个div

我正在创建一个用

元素填充的页面。包含此div的容器具有

display:flex。因此，项目自动包装成几行。现在我想点击一个项目，这样它就会打开另一个
，其中包含关于所选项目的信息。但是这个info div应该位于包含所选div的行下，并且具有容器的全宽

我不知道该怎么做。
我首先制作了一个简单的JSFIDLE：

我得到了click事件并动态地添加了带有Angular的dinfo div。
我的问题主要是关于如何设计它的样式，这样它就不会和flex项目混淆，并且具有容器的宽度

我也有这个形象来形象化我的目标


希望您能帮助我。
我稍微修改了html，将
.item
包装在
.item容器中，以实现所需的样式

我还使用
：after
元素来显示
.infobox
的
标题中的信息

要填充宽度，我添加了一个具有固定高度的div和一个绝对定位的
：在
之后，参考
.container
，要占据整个宽度，请单击
。项目
查看信息，请检查此项


$（'.container'）。单击（函数（e）{
if（！$（e.target）.next（）.hasClass（'show'））{
$（'.item container.show'）.removeClass（'show'）；
$（e.target）.next（）.addClass（'show'）；
}
})
.container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
背景颜色：灰色；
位置：相对位置；
}
.项目{
宽度：300px；
高度：150像素；
背景颜色：粉红色；
保证金：0px 5px 10px 5px；
}
.信息箱{
高度：110px；
显示：无；
}
.infobox.show{
显示：块；
}
.infobox.show:after{
内容：attr（title）；
显示：块；
高度：100px；
背景：#FFF；
宽度：计算（100%-20px）；
位置：绝对位置；
溢出y：滚动；
左：0；
左边距：10px；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
使用angular，您需要在所选项目行中找到最后一个项目，在其后面插入元素，并将其
弹性基础设置为
100%
。这样做，注入的元素将按照您的图形所示参与布局，在一行上填充容器的宽度。@LGSon但是如何在一行上获取最新的flex项呢。如果信息框打开，我调整页面大小，最后一个元素将翻转到下一行，这会起作用吗？如果可能的话，我更愿意看到一些基于CSS的东西，然后用Angualr简单地计算它。因为没有CSS能够知道哪个元素是最后一个，并且能够在之后保留注入的元素，最接近的是在单击后注入它，并且以图形为例，你会得到这样的结果：如果要单击第二项，你得到这个。。。正如你所看到的，他们不会平均出每行的项目数。要克服这一点，您需要一个脚本来查找行上的最后一个并在它之后注入它。您还需要使用“调整大小”事件，跟踪换行符并调整插入的项目accordingly@LGSon而不是在两行之间注入新的
div
，我希望扩展单击的
div
的高度，并将信息框添加到该div中。如图所示，但我现在不知道如何将其设置为容器的宽度。我想这样它总是连接到右边的div。缺点是信息不会推动后面的元素，因为如果你检查你能看到
，则使用绝对定位。信息框
不是定位的，只有
：在
元素定位之后。由于父项是相对于
.item
的，它将推送内容，唯一的限制是我们必须为
.infobox
设置一个特定的高度，如果信息不是动态的，这不是问题。这就是我在说info不会推送后面的元素时的意思。这个解决方案需要在信息上设置一个固定的高度，这可能是非常好的，因为它是一个仅CSS的解决方案。这个解决方案看起来很有希望，我想我可以用ngIf删除“隐藏的”信息框。我将尝试一下，看看它是如何运行的。@SaravananI我测试了你的更新代码，它运行正常。所以我想这已经解决了。谢谢你和所有其他人的帮助。