Html 设置flexbox最后一列的样式

我必须实现如下设计：

这将是WordPress的index.php页面，因此它将使用WordPress循环将博客文章作为单独的“资源”输出

通常我会将其实现为flexbox，因为项目的数量是可变的，我需要它具有响应性，但是这次我们的设计师在项目之间添加了边界

这很好，但是在行结束之前或之后不包括边框。我所知道的任何伪选择器都不能解决这个问题

目前，我的HTML和CSS如下所示：

部分{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
柔性包装：包装；
}
分区{
显示器：flex；
弯曲方向：立柱；
右边框：1px纯红；
右边填充：20px；
右边距：20px；
边缘底部：10px；
}

这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本

我有你需要的，我用pseudo元素显示右边框，如果它是一行的最后一个元素，则将其从屏幕上推下，并用一些空div推新行以保持布局

部分{
显示器：flex；
对齐项目：居中；
柔性包装：包装；
溢出：隐藏；
}
分区{
显示器：flex；
柔性生长：1；
弯曲方向：立柱；
填充：0 20px；
位置：相对位置；
}
分区：第n个最后一个孩子（9）~div{
身高：0；
宽度：140px；
}
分区分区：：之后{
内容：''；
位置：绝对位置；
右边框：1px纯红；
左：100%；
显示：块；
身高：100%；
}
分区：第n个最后一个孩子（9）：：之后{
边界：无；
}
节分区p{宽度：140px；}

这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本

这实际上取决于项目下的背景，但如果它由一种颜色组成，您可以使用简单地将左边框与伪元素重叠的解决方案，如下所示：

部分{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：居中；
位置：相对位置；
左边距：-20px；
}
节：：之前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：20px；
宽度：1px；
背景：#fff；
}
分区{
显示器：flex；
柔性生长：1；
弯曲方向：立柱；
左边框：1px纯红；
左侧填充：20px；
左边距：20px；
文本对齐：居中；
}

这是一些文本


这是一些文本


这是一些文本


这是一些文本


这是一些文本

不，这是不可能的。Flexbox和/或CSS网格中的行/列不是元素，因此无法使用CSS进行选择或设置样式。@Paulie_D我不打算尝试，但出于专业兴趣，是否可以通过php或js进行设置？一种方法是使用第n个子和媒体查询删除粗体，thoJS可以做很多工作，但根据元素的大小及其与容器侧面的距离，这将是相当复杂的。我刚刚对填充物做了一个小的编辑，但似乎你比我快了。我还没有想到处理最后一行的方法。虽然flex grow会使它扩展，但没有flex grow它就不能工作。到目前为止，这是我得到的最接近的。我将采取部分解决方案，一点也不。多亏了这两个问题的答案，我现在已经解决了这个问题。最后我用了另一个答案，不过你的答案也很有帮助。谢谢这也行，但克里斯·李的回答似乎更适合我的具体情况。感谢regardlessI最终使用此解决方案和flex start左对齐内容。这并不完美，但这是最合适的答案