Html flex-justify-content：不工作之间的空间

我正在尝试使用flex box获得三个盒子，以便将Horizontatl跨一个div分发到该div的边缘。我需要使用justify内容：空格之间；依照

但是我有一个额外的div（由wordpress生成） 因此，我的html是：

<div class="locationHolder">
  <div class="textwidget"> <!-- extra div-->
    <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
  </div>
</div>

我在最左边和最右边都有空格，外面的盒子没有到边缘。如果我删除

及其

，则它可以正常工作

如果我将locationHolder设置为display:flex等，它将不起作用

---

我可以用jQ删除额外的div，但是有没有css解决方案来解决这个问题？

添加

.textwidget:：before、.textwidget:：after{content:none；}

。您在第1341行为该元素添加了

内容：“

，它破坏了flex。或者从第1341行删除

.textwidget:：before、.textwidget:：after

）

我也有这个问题，读了很多文章，可以找到解决办法。老实说，我认为这是一个flexbox错误，并准备报告它。终于找到了问题的原因

如果您的flex项目中有psudo元素，则这些项目也将进行flex

element{
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


element:before, element:after{
    content: none;
}

如果导入了引导，这种情况可能会更频繁，因为引导会添加伪元素来清除浮动

如果您想在不需要流动的flex容器中使用伪元素，可以将它们定位为绝对元素

引用规范>

因为它是流动的，一个绝对定位的子flex 容器不参与flex布局

---

你能加一个能用的弹夹吗？看起来不错。。不确定什么是“工作的打劫者”——是的，小提琴确实有用。。。那么，为什么不在这里呢？我觉得它看起来不错，所以也许可以检查一下你是否有

.textwidget

的样式，比如填充或边距？@maxelcat，因为它的“祖父母”的宽度

site content

的宽度为1170px。我尝试过，但一开始就尝试过了，所以我在{content:none；}之后添加了.textwidget:：及其作品。已经快把我逼疯了一个小时了。我就是看不见，谢谢。

element{
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


element:before, element:after{
    content: none;
}