min-width
min-width は CSS のプロパティで、要素の最小幅を設定します。これは width プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。
min-width の値が max-width および width の値より大きい場合は、min-width の値が要素の幅になります。
構文
/* <length> 値 */
min-width: 3.5em;
/* <percentage> 値 */
min-width: 10%;
/* キーワード値 */
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);
/* グローバル値 */
min-width: inherit;
min-width: initial;
min-width: unset;
値
<length>min-widthを絶対的な値で定義します。<percentage>min-widthを包含ブロックの幅に対するパーセント値で定義します。auto- ブラウザーが指定された要素の
min-widthを計算して選択します。 none- ボックスの寸法を制限しません。
max-content- 内容物が推奨する
min-widthです。 min-content- 内容物の最小の
min-widthです。 fit-content(<length-percentage>)- 利用可能な空白をして死された引数で置き換えた
fit-content式を使用します。すなわち、min(max-content, max(min-content, 引数))です。
形式文法
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)ここで
<length-percentage> = <length> | <percentage>
例
table { min-width: 75%; }
form { min-width: 0; }
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Box Sizing Module Level 4 min-width の定義 |
編集者草案 | |
| CSS Box Sizing Module Level 3 min-width の定義 |
草案 | キーワード max-content, min-content, fit-content を追加。 |
| CSS Flexible Box Layout Module min-width の定義 |
勧告候補 | キーワード auto を追加し、初期値として使用する |
| CSS Level 2 (Revision 1) min-width の定義 |
勧告 | 初回定義 |
| 初期値 | auto |
|---|---|
| 適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length または パーセント値, calc(); |
ブラウザーの互換性
BCD tables only load in the browser