CSS min-width 最小の幅を指定する

サンプル	min-width
	min-widthの使い所
	min-widthのサンプル

min-width

min-widthは、最小の幅を指定を指定します。widthの値より小さくなることを防ぎます。

使う場面としては画面とスマホの見え方の調整です。
→例：PC画面では丁度良く見えるがスマホで見ると小さくなりすぎてしまう。最低限の幅を確保したい。レスポンシブデザインです。

min-width : 値

値は以下を設定します。

数値 + 単位	指定した単位で設定します。
数値 + %	包括ブロックに対する割合で設定します。
auto	制限しません。デフォルト。

min-widthの使い所

１．以下のレイアウトがあるとします。

親のbox1のwidthは、500pxです。
子のbox2のwidthは、30%です。
box2は、pxになおすと500☓0.3=150pxです。

２．携帯で見た場合などで、親のbox1のwidthが小さくなったとします。

box1のwidthが300pxになると、box2のwidthは30%なのでpxになおすと300☓0.3 = 90pxとなります。
box2の幅が狭くなり、150pxぴったりで文章があった場合は、改行されてしまいます。

３．意図しない改行を直すため、box2にmin-widthの150pxを追記しました。

box2の最小の幅が150pxとなり、150pxを想定した文章は影響を受けず表示できます。

min-widthは、最小限確保する幅です。

min-widthのサンプル

<style>
  .box1 {
    width: 200px;
    border: 1px solid #000;
  }
  .box2 {
    width: 30%;
    min-width: 120px;
    border: 1px solid #000;
    background-color: pink;
  }
</style>
<div class="box1">box1
  <div class="box2">box2のテスト</div>
</div>

8行目は、min-width:120pxを指定しています。