flex justify-content：space-between not working

Question

私はdivを横切ってhorizo​​natllをそのdivのフレックスボックスを使って配布するために3つのボックスを取得しようとしています。私は、justify-content：space-betweenを使用する必要があります。私は、余分なdiv要素（それはワードプレスによって生成される） を持っているしかしw3schools

あたりのように私の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を置く場合：フレックスなどを、それが

動作しない私はjQので、余分なdiv要素を削除することができますが、これを克服するためのCSSの解決策はありますか？

Answer 1

.textwidget::before, .textwidget::after { content: none; }を追加します。あなたはcontent: ""がこの要素の1341行目に追加されており、それはflexを破ります。または、.textwidget::before, .textwidget::afterを1341行から削除してください）

Answer 2

私も問題があり、多くの記事を読んで解決策を見つけることができました。私は正直言って、それはフレックスボックスのバグで、それを報告しようとしていました。最後に問題の原因を見つけました。

フレンドアイテムにプードーエレメントがある場合、それらのアイテムもフレキシブルになります。

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

あなたはブートストラップをインポートした場合はブートストラップは、フロートをクリアするために、疑似要素が追加されるため、これは、より頻繁に発生する可能性があります。