min-width横幅の下限
要素の使用幅が指定値を下回らないように制限します。初期値はautoです。
min-width
要素が縮められる横幅の下限を決めるプロパティ。widthで小さな幅を指定しても、設定した最小幅より小さくならない様子を確かめます。
遊んでみよう
width: 80px より優先する最小幅
min-width
CSS
.element min-width: 180px;
値のパターン
min-widthの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定の下限、%は親となる包含ブロックの幅を基準にした下限です。
width / max-width → min-widthほかの幅指定より優先
min-widthがwidthやmax-widthより大きいときは、min-widthの値が実際の幅になります。
早見表
初期値のautoは要素の種類やレイアウトによって決まり方が変わります。まずはpx・%と、内容を基準にするmin-contentを押さえます。
01
autoブラウザーが計算初期値02
240px長さで下限固定の最小幅03
50%親幅の半分以上相対的な下限04
min-content内容が収まる最小幅内容基準よくある使い方
01
ボタンの幅を揃える
ラベルが短いボタンにも最小幅を持たせると、複数のボタンを同じ大きさへ揃えやすくなります。
min-width: 8rem;02
Flexboxの子要素を縮める
長い文字を持つFlexboxの子要素が縮まないときは、自動最小幅を0へ上書きすると収まりやすくなります。
min-width: 0;03
表の読みやすい幅を保つ
列が多い表へ最小幅を指定し、狭い画面では外側の要素で横スクロールできるようにします。
min-width: 720px;ポイント
大きすぎる最小幅は、横方向のはみ出しをつくる。
min-widthを画面や親要素より大きくすると、要素は指定した下限を守るため横にはみ出します。固定値は必要な場面だけに使い、FlexboxやGridの子要素を内容より小さく縮めたいときはmin-width: 0も試します。min-widthはwidthとmax-widthより優先され、通常は子要素へ継承されません。
関連するCSSも見てみよう。
min-width と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。