Html 用线分隔的柔性包装

我想用一条垂直线分隔两列。我不想在前七个div的左边多加一行，就像我现在的代码一样

编辑：由于正在渲染div，flexbox不断变化。下面我使用的代码是一个简化版本

到目前为止，我所拥有的：

.flexbox{
最大高度：200px；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.包裹{
宽度：100px；
左边框：1px纯黑；
填充物：5px；
柔性生长：1；
}

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项
第十项
第十一项

只需添加另一个类即可

.flexbox{
最大高度：200px；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.包裹{
宽度：100px；
填充物：5px；
柔性生长：1；
}
.wrap1{
左边框：1px纯黑；
}

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项
第十项
第十一项

您可以使用容器上的伪元素覆盖第一行。这将适用于任何高度和任意数量的元素

.flexbox{
最大高度：200px；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
位置：相对位置；
}
.flexbox:之前{
内容：“；
位置：绝对位置；
z指数：2；
排名：0；
底部：0；
宽度：1px；
背景：#fff；
}
.包裹{
宽度：100px；
左边框：1px纯黑；
填充物：5px；
柔性生长：1；
}

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项
第十项
第十一项

我不想在前七个div的左边多加一行，就像我现在的代码一样

使用第n个子项选择器不选择前七项：

.flexbox{
最大高度：200px；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.包裹{
宽度：100px；
填充物：5px；
柔性生长：1；
}
.flexbox分区：第n个子项（n+8）{
左边框：1px纯黑；
}

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项
第十项
第十一项

您可以包装

.flexbox

，并使用负边距直观地隐藏左侧垂直线

.container{
左侧填充：1px；
溢出：隐藏；
}
.flexbox{
最大高度：200px；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
左边距：-2px；
}
.包裹{
宽度：100px；
左边框：1px纯黑；
填充物：5px；
柔性生长：1；
}

第一项
第二项
第三项
第四项
第五项
第六项
第七项
第八项
第九项
第十项
第十一项

flexbox的高度会变化吗？是的，它会不断变化，因为正在渲染div。我上面使用的代码是一个简化版本。好的，我想你应该更新你的问题，包括这一点，因为这是重要的信息。问题是我的div是从数据库中呈现的（这很可能会改变）。我无法手动浏览所有div以给它们另一个类，因为它现在是我的第三个div，可能是下周的第11个div。@codenoob抱歉，当我最初回答时，我没有看到它指定元素将更改。看起来其他人已经进行了更新以适应这种情况。如果你想让我进一步更新我的，请告诉我。这太棒了！很好的清洁解决方案！