flex justify-content:space-between 不工作答案

【问题标题】：flex justify-content:space-between not workingflex justify-content:space-between 不工作
【发布时间】：2018-03-30 00:47:55
【问题描述】：

我正在尝试使用 flex box 让三个盒子将横向分布在一个 div 上到该 div 的 EDGES。我需要使用 justify-content: space-between;根据w3schools

但是我有一个额外的 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>

如果我这样做 css：

page-template-home-page .locationHolder .textwidget{
 display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width:100%;
    background:green;
}

.page-template-home-page .locationSquare {
    width:30.942%;
    background:#fff;
    margin:0;
}

我在最左边和最右边都有空间 - 外面的盒子不会走到边缘。如果我删除 <div class="textwidget"> 和它的 </div> 那么它工作正常。

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

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

【问题讨论】：

你能添加一个工作的 plunker 吗？
似乎工作正常..jsfiddle.net/ceyqvw96
不确定什么是“工作的 plunker” - 是的，小提琴确实有效......所以为什么不在这里 restore.ee-web.co.uk
它对我来说看起来不错，所以也许检查一下你是否有 .textwidget 的任何样式，比如填充或边距？
@maxelcat 因为它的祖父母的宽度.. site-content 的宽度为 1170px。

标签： html css flexbox

【解决方案1】：

添加.textwidget::before, .textwidget::after { content: none; }。您在第 1341 行为此元素添加了 content: ""，它会破坏 flex。或者只是从第 1341 行删除 .textwidget::before, .textwidget::after ;)

【讨论】：

我试过了 - 它在一开始就开始了，所以我添加了 .textwidget::after {content: none;} 及其作品。它让我发疯了大约一个小时。我只是看不到它，所以谢谢。

【解决方案2】：

我也有这个问题，阅读了很多文章，可以找到解决方案。老实说，虽然这是一个 flexbox 错误，但我正要报告它。终于找到问题的原因了。

如果您的 flex 项目中有 psudo 元素，这些项目也将被 flexed。

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;
}

如果你导入了 Bootstrap，这可能会更频繁地发生，因为 Bootstrap 添加了伪元素来清除浮动。

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

引自规范>

由于它是外流的，因此是 flex 的绝对定位子代容器不参与弹性布局

【讨论】：