ボックス
inline-size
inline-size は、文字が並ぶ向きの要素の大きさを決めます。横書きでは width と、縦書きでは height と同じ働きになります。
構文
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;
inline-size: 120px;
}コントロール
inline-size120px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
120pxなどの長さ：その長さにします。auto：初期値です。まわりに合わせて決まります。横書きのふつうのブロック要素では、親の幅いっぱいに広がります。min-content：折り返せるところをすべて折り返したときの長さです。英語なら最も長い単語の長さになります。max-content：一度も折り返さないときの長さです。fit-content：中身に合わせますが、親に収まる長さは超えません。
プレビューの箱は縦書き（writing-mode: vertical-rl）にしてあるので、文字は上から下へ並び、inline-size が箱の高さを決めます。値を変えると列の長さが変わり、収まらない文字は左の列へ折り返します。コードから補助の writing-mode を消すと横書きになり、inline-size が幅を決めます。
よく使う場面
縦書きと横書きを切り替えるページで、文字の向きに合わせた大きさを 1 つの書き方で決めたいときに使います。縦書きにしても「1 行の長さ」の指定のまま働くので、writing-mode を変えるだけで向きに合った大きさになります。
気をつけること
- 横書きでは
widthと、縦書きではheightと同じものを決めるので、両方書くとあとに書いた方が効きます。 %は、親の同じ向きの大きさ（縦書きなら高さ）に対する割合です。縦書きで親の高さが決まっていないと、autoと同じになります。- 下限と上限には、
min-width・max-widthと同じ働きのmin-inline-size・max-inline-sizeを使います。