A property that keeps an element from getting smaller than a set size, even when text direction changes.
min-block-size
は、ブロック方向(縦方向)の最小サイズを決めるプロパティです。
かんたんに言えば、「これ以上小さくならない高さ」を決めるためのものです。
たとえば、テキスト量が少なくて中身が小さく見えてしまう時に、「最低でもこの高さにはしておきたい」ときに使えます。
min-height
と似ていますが、「縦書きにも対応する柔軟な書き方」になっています。
CSS の 論理プロパティ(logical property) のひとつで、ブロック方向(writing-mode
によって縦横が変わる)に対して、要素が縮むことのできる最小のブロックサイズを指定します。
つまり、書字方向を変えても自動的に対応できるので、多言語対応・縦書き対応のサイトに便利です。
CSS
.box {
min-block-size: 200px;
}
このように書くと、縦書きでも横書きでも「ブロック方向」が 200px より小さくなりません。
レイアウトが崩れないようにしたいときや、コンテンツが少なくても一定の高さを保ちたいときに使います。
min-height
(ただし書字方向に依存)min-height
の代わりに使う