[CSS] min-block-size、min-inline-sizeプロパティで書字方向に応じてボックスの幅と高さの最小値を指定しよう!

1.min-block-size、min-inline-sizeとは?

min-block-size、min-inline-sizeプロパティはmin-widthまたはmin-heightプロパティの働きを要素の書字方向に応じて指定します。

writing-modeプロパティで指定した値によって、その対応が決定されるプロパティです。

wrting-modeプロパティの値がhorizontal-tbの場合、書字方向は左から右へ、各行は上から下へ配置されます。

この時におけるmin-block-sizeプロパティの値はmin-heightにmin-inline-sizeプロパティの値はmin-widthにそれぞれ対応します。

wrting-modeプロパティの値がvertical-rlの場合、書字方向は縦書きで上から下へ、各行は右から左へ配置されます。

この時におけるmin-block-sizeプロパティの値はmin-widthにmin-inline-sizeプロパティの値はmin-heightにそれぞれ対応します。

値の指定方法は以下の通りです。

{ min-block-size: 値; }

{ min-inline-size: 値; }

値の指定方法

min-width、min-heightプロパティと同様です。

2.min-block-size、min-inline-sizeの使い方

それではmin-block-size、min-inline-sizeの使い方をみていきましょう。

.text {
 writing-mode: vertical-rl;
 background-color: red;
 block-size: 5%;
 min-inline-size: 150px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!