【CSS Modules】display-inside型の使い方

display-insideプロパティは、CSSにおいて、要素の内部に配置されるコンテンツ（子要素など）のレイアウトモデルを決定する値を保持するプロパティです。このプロパティは、要素自身がWebページ上でどのように表示されるか（ブロック要素として振る舞うか、インライン要素として振る舞うかなど）ではなく、その要素の内部で子要素がどのように配置されるかを制御することに特化しています。

従来のdisplayプロパティは、要素の外側の表示タイプ（要素自身がどう振る舞うか）と、要素の内側のレイアウトモデル（子要素がどう並ぶか）の両方を一度に設定します。例えば、display: flex;は、その要素自体がブロックレベルの振る舞いを持ちつつ、その子要素はFlexboxレイアウトの規則に従って配置されるように指定します。display-insideプロパティは、このdisplayプロパティが持つ機能のうち、内部表示タイプ、つまり子要素のレイアウトに焦点を当てたものです。

具体的には、block、inline、flex、gridといった値を取ることが想定されており、それぞれが要素内部のコンテンツに対して異なるレイアウト規則を適用します。例えば、display-inside: flex;と指定することで、その要素の子要素はFlexboxコンテナのルールに従って柔軟に配置されるようになります。

このプロパティは、将来的にCSSのdisplayプロパティの役割をより明確に分離し、開発者がレイアウトをより細かく、かつ直感的に制御できるようにすることを目指して提案されています。しかしながら、現在、display-insideプロパティは主要なWebブラウザで直接サポートされているわけではなく、CSSの仕様策定段階にある実験的なプロパティです。現時点では、displayプロパティを使用して外部と内部の表示タイプを同時に設定することが一般的です。

Copy
1.selector {
2  display: flex flow;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません