【CSS Modules】min-block-sizeプロパティの使い方

min-block-sizeプロパティは、要素のブロック軸方向における最小サイズを保持するプロパティです。このプロパティはCSSの論理プロパティの一つであり、その動作は文書の書字方向（writing-modeプロパティ）によって変化します。

具体的には、標準的な横書きのテキスト（例: writing-mode: horizontal-tb;）の場合、min-block-sizeは要素の最小の高さを指定するmin-heightプロパティと同じように機能します。一方で、縦書きのテキスト（例: writing-mode: vertical-lr;やvertical-rl;）が設定されている場合、min-block-sizeは要素の最小の幅を指定するmin-widthプロパティと同じように機能します。これは、コンテンツがブロックの流れる方向（ブロック軸）に沿ってレイアウトされることを考慮し、その軸上での最小限のサイズを保証するために用いられます。

このプロパティを使用することで、要素内のコンテンツが少ない場合でも、その要素が特定のブロック軸方向の最小サイズを下回らないように設定できます。例えば、ウェブサイトのカードコンポーネントやナビゲーションアイテムにおいて、内容の長短に関わらず、最低限の視覚的な高さを（または幅を）確保したい場合に非常に有効です。指定できる値には、pxやemなどの長さの単位、または親要素のブロックサイズに対する割合を示すパーセンテージなどがあります。国際化されたウェブサイトや、多様な書字モードに対応する柔軟なレイアウト設計において、min-widthやmin-heightといった物理的なプロパティよりも、より適応性の高い制御を提供します。

Copy
1div {
2  min-block-size: 100px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません