Question

我正在尝试使用弹性框将三个框分布到div的EDGES上。我需要使用justify-content：space-between;根据{{3}}

但是我有一个额外的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解决方案来克服这个问题吗？

Answer 1

添加<?php $arr = array(2, -3, 6, 1); function positive($a){ if($a > 0){ return $a; } } $newArr = array_sum(array_filter($arr, "positive")); print_r($newArr); ?>。您在第1341行为此元素添加了.textwidget::before, .textwidget::after { content: none; }，它会中断flex。或者只是从第1341行删除content: "";）

Answer 2

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

如果您在弹性项目中使用了psudo元素，那么这些项目也将被弯曲。

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容器中使用伪元素，可以将它们置于绝对位置。

引用规范＆gt;

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

flex justify-content：space-between not working

2 个答案: