CSS

A property that keeps an element from getting smaller than a set size, even when text direction changes.

min-block-size

やさしい説明

min-block-size は、ブロック方向(縦方向)の最小サイズを決めるプロパティです。

かんたんに言えば、「これ以上小さくならない高さ」を決めるためのものです。

たとえば、テキスト量が少なくて中身が小さく見えてしまう時に、「最低でもこの高さにはしておきたい」ときに使えます。

min-height と似ていますが、「縦書きにも対応する柔軟な書き方」になっています。

正確な説明

CSS の 論理プロパティ(logical property) のひとつで、ブロック方向(writing-mode によって縦横が変わる)に対して、要素が縮むことのできる最小のブロックサイズを指定します。

横書きの場合
ブロック方向=縦方向(高さ)
縦書きの場合
ブロック方向=横方向(幅)

つまり、書字方向を変えても自動的に対応できるので、多言語対応・縦書き対応のサイトに便利です。

こう書けばOK

CSS

.box {
    min-block-size: 200px;
}

このように書くと、縦書きでも横書きでも「ブロック方向」が 200px より小さくなりません。

レイアウトが崩れないようにしたいときや、コンテンツが少なくても一定の高さを保ちたいときに使います。

ポイントまとめ

役割
ブロック方向の最小サイズを決める
似ているもの
min-height(ただし書字方向に依存)
おすすめの使い方
多言語対応・縦書き対応のデザインで min-height の代わりに使う
対応ブラウザ
主要ブラウザで対応済み(古いIEを除く)