max-contentとmin-contentの違い

min-contentとmax-contentの違い


要素のwidthを決める値に「max-content」と「min-content」というものがあります。
max-content は、その要素内のサイズに合せたwidthとなります。ちなみに、執筆時時点でIE未対応です。

たとえば、

<p>今日は良い天気です</p>

というpタグに、width: max-content; を指定すると、テキストが収まる最小幅がwidthとなります。

個人的にはブロックレベルの振る舞いのままbackgroundやborderをアイテム幅で指定したいときなどに使ったりします。

.sample{
  background: gold ;
}
.sample2 {
  width: max-content;
}

sample-1 (width指定なし)

sample-2 (width: max-content)

このようにmax-contentは分かりやすいのですが、「じゃあmin-contentってなんだ?」となります。

min-contentは最小文節

先に言っておくと、min-contentは正直なところ日本語ではあまり有能ではありません。
まずは英語でサンプルを作ってみます。

sample-3{
  width: min-content ;
  background: tomato ;
}

sample-4{
  width: max-content ;
  background: green ;
}

This is sample-3

This is sample-4

察しの良い方ならお分かりいただいたと思いますが、min-contentを指定したブロックは、テキストを単語で区切り、最大幅となる「sample-3」にあわせたwidthに調整されます。

最大幅の単語のサイズにあわせて、他のテキストも自動的に改行されます。

日本語ではまだ文節の区切りが怪しい

英語では単語を空白で区切るのでmin-contentの設定も容易ですが、空白を用いない日本語ではmin-contentに意図通りの働きを求めるのは難しいです。

句読点を使うことである程度調整できますが、正確に文節を区切るのはまだまだ無理でしょう。

width: auto(指定なし)

これはサンプルです

width: min-content(句読点なし)

これはサンプルです

width: min-content(句読点あり)

これは、サンプルです。

タイトルとURLをコピーしました