ボックス
block-size
block-size は、行が積み重なる向きの要素の大きさを決めます。横書きでは height と、縦書きでは width と同じ働きになります。
構文
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
writing-mode: vertical-rl;
block-size: 200px;
}コントロール
block-size200px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
200pxなどの長さ：その長さにします。中身が収まらないときは箱からはみ出します。auto：初期値です。中身の行の数に合わせて伸び縮みします。min-content・max-content・fit-content：ふつうの文章の箱では、どれも中身に合わせた大きさ（autoと同じ）になります。
プレビューの箱は縦書き（writing-mode: vertical-rl）にしてあるので、行は右から左へ積み重なり、block-size が箱の幅を決めます。auto では列の数に合わせた幅になり、長さで決めると、収まらない列は箱の左側で切れて見えなくなります（プレビューの箱は、はみ出した中身を隠しています）。コードから補助の writing-mode を消すと横書きになり、block-size が高さを決めます。
よく使う場面
縦書きと横書きを切り替えるページで、行が積み重なる向きの大きさを 1 つの書き方で決めたいときに使います。inline-size と組み合わせると、どちらの向きでも同じ形の箱になります。
気をつけること
- 横書きでは
heightと、縦書きではwidthと同じものを決めるので、両方書くとあとに書いた方が効きます。 %は、親の同じ向きの大きさ（横書きなら高さ）に対する割合です。横書きで親の高さが決まっていないと、autoと同じになります。- 下限と上限には、
min-height・max-heightと同じ働きのmin-block-size・max-block-sizeを使います。