CSS min-block-size 属性

定義と使用法

min-block-size ブロック方向における指定された要素の最小サイズを指定します。

内容のブロック方向上のサイズが最小サイズより小さい場合、 min-block-size 属性値が適用されます。

内容のブロック方向上のサイズが最小サイズを超えた場合、 min-block-size 属性値は無効です。

注意：関連する CSS 属性 writing-mode ブロック方向を定義し、これにより min-block-size 属性の結果です。英語のページでは、ブロック方向は垂直で、インライン方向は左から右です。

CSS min-block-size 属性は CSS 属性 min-height および min-width 非常に似ていますが、 min-block-size 属性はブロック方向に依存します。

例

例 1

以下の <div> 要素のブロック方向上の最小サイズを 200ピクセルに設定します：

div {
  min-block-size: 200px;
}

自分で試してみてください

例 2：書き込みモード

<div> 要素の writing-mode 属性値が vertical-rl に設定された場合、ブロック方向が垂直から側面に変わります。これにより、 min-block-size 属性の動作方法：

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

自分で試してみてください

例 3：min-block-size と block-size

以下の <div> 要素（block-size （100px）と別の <div> 要素（min-block-size （100px）の内容のサイズが変わったときの異なる反応を観察します：

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

自分で試してみてください

CSS 文法

min-block-size: auto|length|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

相关页面

参考：CSS ブロックサイズ属性

参考：CSS max-block-size 属性

参考：CSS min-height 属性

参考：CSS min-width 属性

参考：CSS writing-mode 属性