“max-width”プロパティ:最大の横幅

概要

“max-width”プロパティは要素の横幅、水平方向の大きさの最大値を指定するプロパティです。

“width”プロパティの値が“max-width”プロパティの値を超える場合は“max-width”プロパティの値が横幅になります。“max-width”プロパティの値が“min-width”プロパティの値よりも小さい場合は“min-width”プロパティが優先されます。

“max-width”プロパティは既定ではコンテント・ボックスの横幅を指定します。“max-width”プロパティで指定した横幅をボーダー・ボックスの横幅としたい場合は“box-sizing: border-box;”を適用します。

サンプルコード

値

値	説明
キーワード値
none	制限しない
min-content	【横書きの場合】コンテンツをはみ出さずに内包できる最小の横幅 (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の横幅)
	【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
max-content	【横書きの場合】要素の理想的な横幅 (コンテンツを折り返さずに内包できる最小の横幅)
	【縦書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが横幅を計算します
stretch	マージン・ボックスの横幅が使用可能な領域の横幅をすべて占有するように横幅を計算 (左右のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-content	“min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
contain	アスペクト比が指定されていればその制約の中でマージン・ボックスの横幅が使用可能な領域の横幅をできる限り占有するように横幅を計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
“<length-percentage>”値
<length>	“px”、“vw”などで横幅を指定
<percentage>	内包される包括ブロックの横幅を“100%”として横幅を指定
他の値
fit-content()	“fit-content()”関数で横幅を指定
共通キーワード

仕様書

定義されている仕様書

max-width

<length>
<percentage>
none
min-content
max-content
fit-content()
stretch
fit-content
contain

制限しない

div {

resize: both;
overflow: hidden;
max-width: none;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

横幅を内容に合わせる

横書きの場合

div {

resize: both;
overflow: hidden;
max-width: min-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
overflow: hidden;
max-width: max-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

resize: both;
overflow: hidden;
max-width: min-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
overflow: hidden;
max-width: max-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

横幅を内包される領域に合わせる

div {

resize: both;
margin: 10px;
width: stretch;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
margin: 10px;
max-width: fit-content;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
aspect-ratio: 1/1;
margin: 10px;
max-width: contain;

}

In spring, dawn is the most beautiful moment.

“<length>”値で指定する

div {

resize: both;
overflow: hidden;
max-width: 200px;

}

In spring, dawn is the most beautiful moment.

“<percentage>”値で指定する

div {

resize: both;
overflow: hidden;
max-width: 50%;

}

In spring, dawn is the most beautiful moment.

“fit-content”関数で指定する

div { max-width: fit-content(200px);}


In spring, dawn is the most beautiful moment.