このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
min-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 2020年1月.
* Some parts of this feature may have varying levels of support.
min-block-size はCSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これはmin-width またはmin-height のどちらかのプロパティと、writing-mode の値に応じて対応します。
書字方向が垂直方向であった場合、min-block-size の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティのmin-inline-size が要素のもう一方の寸法を定義します。
試してみましょう
min-block-size: 150px;writing-mode: horizontal-tb;min-block-size: 150px;writing-mode: vertical-rl;min-block-size: 20px;writing-mode: horizontal-tb;min-block-size: 15em;writing-mode: vertical-lr;<section> <div> このボックスは、最小ブロックサイズを変更することができます。<br /> ボックスの最小サイズよりも多くのコンテンツがある場合、コンテンツの必要に応じてブロックの寸法が伸長します。 </div></section>#example-element { display: flex; flex-direction: column; background-color: #5b6dcd; justify-content: center; color: #ffffff;}構文
css
/* <length> 値 */min-block-size: 100px;min-block-size: 5em;min-block-size: anchor-size(self-inline);/* <percentage> 値 */min-block-size: 10%;/* キーワード値 */min-block-size: max-content;min-block-size: min-content;min-block-size: fit-content;min-block-size: fit-content(20em);/* グローバル値 */min-block-size: inherit;min-block-size: initial;min-block-size: revert;min-block-size: revert-layer;min-block-size: unset;値
min-block-size プロパティはmin-width およびmin-height の各プロパティと同じ値を取ります。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | width およびheight と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの block-size |
| 計算値 | min-width およびmin-height と同じ |
| アニメーションの種類 | length またはパーセント値, calc(); |
形式文法
min-block-size =
<'min-width'>
<min-width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain
<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> =
<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
例
縦書きでブロック方向の最小寸法を設定
HTML
html
<p>テキストの例</p>CSS
css
.exampleText { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px;}結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-min-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |
ブラウザーの互換性
関連情報
- 対応付けされる物理的プロパティ:
min-widthおよびmin-height writing-mode