如何在不新增父元素时，为div的第2、3子元素实现justify-content:space-between效果？

首先要明确：justify-content是flex容器的属性，不能直接给子元素设置。不过不用新增父容器，我们可以利用Flex布局的特性实现你要的「第2、3个子元素之间拉开间距」的效果，以下是两种可行方案：

方案1：利用margin:auto（最简单） #

给第3个子元素设置左自动边距，让它被推到容器右侧，自然和第2个元素形成间距：

.wrapper{
    display: flex;
}

.container-3 {
    margin-left: auto;
}

效果：.container-1和.container-2靠左排列，.container-3被自动推到最右侧，三者的布局完全符合你要的「第2、3个元素间有space-between式间距」的需求。

方案2：用伪元素填充间距 #

如果需要更灵活控制（比如后续要在间距里加内容），可以给第2个元素添加伪元素，让它占据中间的所有空间：

.wrapper{
    display: flex;
}

.container-2::after {
    content: "";
    flex-grow: 1; /* 让伪元素填充剩余空间 */
}

这种方式不会新增真实DOM节点，伪元素会作为flex容器的子元素，把.container-3挤到右侧，和.container-2形成拉开的间距。

为什么不用nth-child直接设置？ #

nth-child可以选中第2、3个子元素，但justify-content不能作用在子元素上，所以直接给它们加这个属性没有效果。我们上面的方案都是基于flex容器的布局规则，用子元素的margin或伪元素来模拟space-between的效果。

内容的提问来源于stack exchange，提问作者Skar