フレックスボックスは以下を生成しますか？beforeと：after？

Question

好奇心の質問ですが、ネット上で回答が見つかりません。

私はそう、私は私のスタイルシートの先頭にこれを宣言した私のCSSに:beforeと:afterの多くを使用します。

:before, :after { 
    content: ""; 
} 

この方法で、私は私が必要contentたびに宣言する必要はありません疑似クラス。

私がそれをしたとき、display: flexで表示された要素は、別々に公開されています。 flexboxesはcontent: "something"で、独自の擬似クラスを生成します：

例：私は、だから私は思っていたjustify-content: space-between

を宣言したのに対し、それらが集中していますか？

Answer 1

フレックスボックスは、content: "something"で独自の擬似クラスを生成しません。ここで起こるのは、他のすべての::beforeおよび::after疑似要素と同じです。つまり、余分なコンテンツを作成しています。 content: ""はcontent: noneと同じではありません！

この例では、子の枠線を指定して、どこにあるかを確認できます。 ::beforeなしと::after：

section { 
 
    display: flex; 
 
    background: yellow; 
 
    justify-content: space-between; 
 
} 
 
section div { 
 
    border: 1px solid red; 
 
}

<section> 
 
<div>one</div> 
 
<div>two</div> 
 
</section>

そして::beforeと::afterと。今では2つの要素と2つの擬似要素があり、合計4つのコンテンツがあります。振る舞いは完全に予想どおりです。これらの4ビットは均等に分散されています。

section {display:flex; background:yellow; justify-content:space-between} 
 
section div {border:1px solid red;} 
 
section::before, section::after {content:""; border:1px solid red;}

<section> 
 
<div>one</div> 
 
<div>two</div> 
 
</section>

すなわちflexboxesため望ましくない動作である場合には、単にそれらの要素のためのバックnoneからcontentプロパティをリセットします。

Answer 2

クロスボックスモデルでは、疑似要素はコンテナの子になります。フレックスコンテナに::before/::afterと宣言すると、それらの擬似要素はフレックスアイテムになります。

justify-content: space-betweenという2つの実際の（DOM）要素があり、次に::beforeと::after要素を追加すると、4つのフレックスアイテムが追加されます。それらの擬似オブジェクトはエッジ位置をとり、DOM要素をコンテナ全体に強制的に広げます。

これは実際にフレックスアイテムをコンテナに均一に広げるのに使用できる方法です。space-betweenではなく、space-aroundではなく、space-evenlyです。これは、すべての項目の両側に等しいスペースを割り当てます。

space-evenlyはまだ広くサポートされていないため、擬似要素のハックは根本的な回避策です。ここ

詳細：Equal space between flex items