CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする

zhangxinxu より https://www.zhangxinxu.com/wordpress/?p=9404

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してください。サークルはとても小さいです。緊急に必要な場合は、許可を得るためにご連絡ください。

1. Safariブラウザのサポート

display:flow-rootが最初にリリースされたとき、その互換性を見て、いつ本番環境で使えるようになるのかと思っていました。今日、再びこれに遭遇し、互換性を確認しました。おや、これはなかなか良いですね。Safari ブラウザはバージョン 13 からこれをサポートしているので、すぐに広く使用されるようになるでしょう。

2. display:flow-root は何に使用されますか?

インライン要素でも元々ブロックレベル要素でも、 display:flow-root宣言が適用されると、要素はブロックレベル要素になります。同時に、この要素は新しいブロックレベル書式設定コンテキストを確立します。これは業界では一般に BFC と呼ばれています。

BFC に関しては、私の以前の古典的な記事「CSS の流動的な特性と BFC 特性での複数列の適応レイアウトの詳細な理解」を参照してください。

BFC はレイアウトに使用されるだけでなく、フロートをクリアしてマージンの結合を削除することもできます。したがって、 display:flow-rootにも同様の効果があります。float、position、overflow、inline-block などの機能によって生成されるブロックレベル形式のコンテキストと比較すると、 display:flow-root要素に追加の副作用をもたらしません。たとえば、 overflow:hiddenフロートの干渉を削除できますが、子要素がコンテナーの外側に配置されないようにする可能性があります。

display:flow-rootを使用するとそのような心配はありません。

たとえば、次の例では、コンテナーにアウトラインがあり、子要素はフロートされています。

<p><img src="mm.jpg"></p>
ｐ {
    アウトライン: ソリッド ディープスカイブルー;    
}
画像 {
    フロート: 左;
}

結果の輪郭は、以下に示すように結合されます。

この時点で、 <p>要素にdisplay:flow-rootが設定されていれば、フローティングによって要素の高さがつぶれる問題は発生しなくなります。

ｐ {
    表示: フロールート;
}

効果は次のスクリーンショットに示されています。

同様に、 display:flow-rootを使用すると、マージン プロパティのマージ現象も防ぐことができます。

HTML コードは次のとおりです。

<div class="box">
    <p>マージン: 2em;</p>
</div>
<div class="box flow-root">
    <p>マージン: 2em;</p>
</div>

CSS は次のとおりです。

。箱 {
    背景色: #f0f3f9;    
}
.box p {
    アウトライン: ソリッド ディープスカイブルー;
    マージン: 2em;
}
.flow-root {
    表示: フロールート;
}

その結果、上のコンテナ要素のマージンが侵食され、下のコンテナ要素のマージン侵食はdisplay:flow-rootが設定されているため阻止されます。その結果、次の図に示すように、内部の<p>要素が占めるスペースが大きく表示されます。

上記の両方の例にはデモが用意されています。display:flowt-root のデモを見るには、ここをクリックしてください。

display:flow-root float 属性と組み合わせて使用​​することで、2 列の適応型レイアウト効果を実現することもできます。

例えば：

<div class="box flow-root">
    <img src="mm.jpg">
    <p class="flow-root">Pinduoduoは7％急騰し、時価総額は700億米ドルを超え、JD.comを上回りました。黄正氏の個人資産は中国本土で3番目に裕福な人物でもある。
</div>

.box 画像 {
    フロート: 左;
    右マージン: 20px;
}
.box p {
    背景色: #f0f3f9;
    パディング: 10px;
}
.flow-root {
    表示: フロールート;
}

リアルタイム効果は以下のとおりです。

Pinduoduoは7％急騰し、時価総額は700億ドルを超え、JD.comを上回った。黄正氏の個人資産は中国本土の富豪の中で第3位である。

3. 結論

この記事の要点を要約する

display:flow-root要素をブロック状にし、書式設定コンテキスト BFC を含めることができます。これを使用して、フロートをクリアし、 margin結合を削除し、2 列の適応型レイアウトを実現できます。

一部のプロジェクトではdisplay:flow-roo t を使用できます。

表示:フロー

displayプロパティは、要素がインライン ボックスまたはブロック ボックスのいずれかであることを示す、現在実験段階のflowという値もサポートしています。

どのボックスがレンダリングされるかは、外側の要素の表示タイプによって異なります。

インライン書式設定コンテキストまたはブロック書式設定コンテキストを生成します。要素の外部表示タイプがインラインまたはランインであり、要素がブロックまたはインライン書式設定コンテキストに参加している場合、要素はインライン ボックスとして動作し、それ以外の場合はブロック コンテナー ボックスとして動作します。

書式設定コンテキスト プロパティ ( position 、 float 、 overflowなど) が含まれているかどうか、および要素自体がブロック書式設定コンテキストまたはインライン書式設定コンテキストに参加しているかどうかに応じて、 display:flow要素は、そのコンテンツに対して新しいブロック書式設定コンテキスト (BFC) を確立するか、そのコンテンツを親書式設定コンテキストに統合します。

display:flowの互換性は現在のところ不明であり、サポートしているブラウザはほとんどないと推定されます。

熟成したら詳しく紹介します。

CSS display:flow-root 宣言を1つの記事でマスターするこの記事はこれで終わりです。より関連性の高い CSS display:flow-root コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。