max-block-size
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
* Some parts of this feature may have varying levels of support.
max-block-size は CSS のプロパティで、 writing-mode で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 max-block-size は max-height と等価になります。書字方向が垂直 (縦書き) であれば、 max-block-size は max-width と同じになります。
もう一方の方向の最大長は、 max-inline-size プロパティを使用して指定します。
max-width は常に水平方向の寸法に使われ、 max-height は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。
ふつう max-height または max-width を使用する場面でいつでも、代わりに max-block-size をコンテンツの最大の「高さ」を設定するために使用し (これは垂直の値ではない可能性がありますが)、 max-inline-sizeをコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す writing-mode の 例をご覧ください。
試してみましょう
max-block-size: 150px; writing-mode: horizontal-tb; max-block-size: 150px; writing-mode: vertical-rl; max-block-size: 20px; writing-mode: horizontal-tb; max-block-size: 75%; writing-mode: vertical-lr; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box where you can change the maximum block size. <br />This will limit the size in the block dimension, potentially causing an overflow. </div> </section> #example-element { display: flex; flex-direction: column; background-color: #5b6dcd; justify-content: center; color: #ffffff; } 構文
/* <length> 値 */ max-block-size: 300px; max-block-size: 25em; /* <percentage> 値 */ max-block-size: 75%; /* キーワード値 */ max-block-size: none; max-block-size: max-content; max-block-size: min-content; max-block-size: fit-content(20em); /* グローバル値 */ max-block-size: inherit; max-block-size: initial; max-block-size: revert; max-block-size: revert-layer; max-block-size: unset; 値
max-block-size プロパティの値は、 max-width および max-height プロパティで有効なすべての値を取ることができます。
<length>max-block-sizeを絶対的な値で定義します。<percentage>max-block-sizeを包含ブロックの幅に対するパーセント値で定義します。noneボックスの寸法を制限しません。
max-content内容物が推奨する
max-block-sizeです。min-content内容物の最小の
max-block-sizeです。fit-content(<length-percentage>)利用可能な空白を指定された引数で置き換えた
fit-content式を使用します。すなわち、min(max-content, max(min-content, 引数))です。
書字方向が方向にどう影響するのか
writing-mode の値は次のように max-block-size から max-width または max-height への対応付けに影響します。
writing-mode の値 | max-block-size が等価になるもの |
|---|---|
horizontal-tb, lr非推奨;, lr-tb非推奨;, rl非推奨;, rb非推奨;, rb-rl非推奨; | max-height |
vertical-rl, vertical-lr, sideways-rlExperimental, sideways-lrExperimental, tb非推奨;, tb-rl非推奨; | max-width |
メモ:writing-mode の値のうち sideways-lr および sideways-rl は設計プロセスの後期に CSS 書字方向s Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | width および height と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの block-size |
| 計算値 | max-width および max-height と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |
形式文法
max-block-size =
<'max-width'>
<max-width> =
none|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>
<length-percentage> =
<length>|
<percentage>
<calc-size()> =
calc-size(<calc-size-basis> , <calc-sum>)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? , <length-percentage>?)
<calc-size-basis> =
<intrinsic-size-keyword>|
<calc-size()>|
any|
<calc-sum>
<calc-sum> =
<calc-product>[[ '+' | '-' ]<calc-product>]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
<calc-product> =
<calc-value>[[ '*' | / ]<calc-value>]*
<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
( <calc-sum>)
<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN
例
横書きおよび縦書きでの max-block-size の設定
この例では、同じテキスト (Herman Melville の小説 Moby-Dick の冒頭部分) が horizontal-tb および vertical-rl の両方の書字方向で表示されます。
二つのボックスついてそれ以外の部分はすべて、 max-block-size に使われている値を含めて同じです。
HTML
この HTML では、単純に二つの <div> ブロックを作成し、それぞれの writing-mode を horizontal および vertical クラスを用いて設定しています。両方のボックスで standard-box クラスを共有しており、こちらで単純に色、パディング、それぞれの max-block-size の値を設定しています。
<p>書字方向 <code>horizontal-tb</code> (既定値):</p> <div class="standard-box horizontal"> Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. </div> <p>書字方向 <code>vertical-rl</code>:</p> <div class="standard-box vertical"> Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. </div> CSS
この CSS では3つのクラスを定義しています。最初は standard-box で、両方のボックスに適用され、上にあるものです。これはブロックの最小および最大の寸法、フォントの大きさ、などを指定します。
その後にくるクラス horizontal および vertical は、ボックスに writing-mode プロパティを追加し、値を使われるクラスに応じて horizontal-tb または vertical-rl に設定します。
.standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "Open Sans", "Helvetica", "Arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } 結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |
ブラウザーの互換性
関連情報
- 対応する物理的プロパティ:
max-widthとmax-height - 他の方向の最大寸法の設定:
max-inline-size writing-mode
