min-width

スペーシング・サイズ

要素の最小幅を指定するプロパティです。レイアウトの崩れ防止やレスポンシブ対応に役立ちます。

構文

Syntax
min-width: <length> | <percentage> | auto

コード例

例 1

min-width: 120px;
実行結果
min-width: 120px
最小幅120px（親要素幅200px、width:50%指定）

最小幅を120pxに設定

例 2

min-width: 50%;
実行結果
min-width: 50%
width: 20px
親要素幅200px・width:20pxでもmin-width:50%で100pxに保たれる

親要素の50%を下回らないようにする

💡 TIPS

ボタンや入力欄の極端な縮小を防ぐのに便利。

⚠️ よくある間違い

min-widthが効かない場合は親要素の幅やbox-sizingを確認。

関連プロパティ

ブラウザサポート

全ブラウザ対応