Html 当flex项位于列反向时应用n-child（）

假设我使用的插件按时间顺序向我的页面添加内容。该插件不能控制添加到页面的项目数量或添加到页面的顺序

假设在页面中添加了5个项目后，我的HTML就是这样的：

<div class="flex-container">
  <div class="flex-item">First</div>   <!-- Posted 4 days ago -->
  <div class="flex-item">Second</div>  <!-- Posted 3 days ago -->
  <div class="flex-item">Third</div>   <!-- Posted 2 days ago -->
  <div class="flex-item">Fourth</div>  <!-- Posted 1 day ago -->
  <div class="flex-item">Fifth</div>   <!-- Posted today -->
</div>

现在，我的项目将按以下顺序显示：

Fifth
Fourth
Third
Second
First

现在让我们假设我只希望页面上最多显示3个项目。如何使用项目显示的新序列来实现这一点

如果没有使用css反转这些项，我可以使用以下命令删除3项之后的任何内容：

.flex-item:nth-child(n+4) {
  display:none;
}

但是由于它们是相反的，上面的css删除了最后两篇最近的文章

TL；博士 css是否能够根据css重新排序的顺序删除子项，或者我是否需要使用js来重新组织html？

如果

：nth-child（）

选择器与

灵活方向：列

一样工作，那么

：nth-last-child（）

选择器应与

弹性方向：柱反向配合使用

：

.flex容器{
显示器：flex；
弯曲方向：柱反向；
}
.flex项：第n个最后的子项（n+4）{
背景颜色：浅绿色；
}

弗斯特
第二
第三
第四
第五

.flex-item:nth-child(n+4) {
  display:none;
}