CSS ・ 余白・サイズ
min-width
最小の幅
要素の幅がこれより小さくならないように、下限を指定します。
01
サンプルコード
HTML
1<button class="btn">OK</button>
2<button class="btn">キャンセルする</button>
CSS
1.btn {
2 min-width: 120px;
3 padding: 8px 12px;
4 border: 1px solid #b68235;
5 background: #f6ead8;
6}
02
実行結果
ブラウザでの表示
03
解説
min-width は、幅の下限を決めるプロパティです。内容が少なくても、指定した幅より小さくはなりません。
上の例では、文字の短い「OK」ボタンも 120px の幅になり、ボタンの大きさがそろいます。文字が長い場合は、120px より広がります。
width と両方を指定した場合、min-width のほうが優先されます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
auto | 自動（初期値） |
120px | 固定の下限 |
50% | 親要素の幅に対する割合 |
0 | Flexbox のアイテムを内容より小さく縮められるようにする |
Flexbox で文字がはみ出すのを防ぐ
Flexbox のアイテムは内容より小さくならないため、長い英単語などではみ出すことがあります。min-width: 0 で縮められるようになります。
CSS
1.item {
2 flex: 1;
3 min-width: 0;
4}
注意点
- 01min-width を大きくしすぎると、スマートフォンの画面からはみ出します。
- 02@media (min-width: 768px) の min-width は、プロパティではなく「画面幅が768px以上のとき」という条件です。