ボックス

max-width

max-width は要素の幅の上限を決めます。width: 100% のように親に合わせて広がる箱でも、max-width より広くはなりません。画面の広さで幅が変わるレイアウトでよく使います。

構文

none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  width: 100%;
  max-width: 320px;
}

max-width320px

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

320px などの長さや 50%：その幅より広くしません。% は親の幅に対する割合です。
none：上限を決めません。初期値です。
min-content・max-content・fit-content：中身から決まる幅を上限にします。max-content なら、文章を折り返さずに並べた幅より広くなりません。

このページのプレビューでは、width: 100% の箱に max-width を足しています。親が広いときは max-width で止まり、狭いときは親の幅に合わせて縮みます。プレビューの箱の右下のつまみで幅を広げても、max-width で止まります。

文章の 1 行が長くなりすぎないようにするときは、40em のように文字の大きさを基準にした単位で決めると、文字を大きくしても 1 行の文字数が変わりません。画像に max-width: 100% を付けておくと、親より大きな画像も親の幅に収まります。

min-width とぶつかったときは min-width が勝ちます。