要素内容に依存する幅の指定について

Category : CSS

要素内容に依存する幅の指定についてのメモです。
これらは CSS basic box model (草案) に記載されており、MDN のページ に分かりやすく説明されています。

本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。
2013年4月現在、幅の指定として使えるブラウザは Firefox と Google Chrome です。Safari では動くんですかね。最新版ないから分かりません。

available or fill-available
包含ブロックから該当要素のマージン、ボーダー、パディングのサイズを引いた幅。
現在、Firefox は -moz-available、Chrome は -webkit-fill-available で動作します。
max-content
ややこしい計算式があるんですが、とりあえずは該当要素が取りうる最大の幅として覚えておけばいいかと。
min-content
同様に、該当要素が取りうる最小の幅として覚えておけばいいかと。
fit-content
max(‘min-content’, min(‘max-content’, ‘available’)) ということなので、max-contentavailable を比較して小さい幅、そしてそれと min-content を比較して大きい幅となります。

実際に試してみます。まだ -moz--webkit- が必要なので、使う場合は忘れずに。
スクリーンショットは Firefox 20 でのものです。

min-content, max-content, fit-content 1

min-content, max-content, fit-content サンプル 1

<div class="box">
  <p class="min">Lorem ipsum dolor sit amet</p>
</div>

<div class="box">
  <p class="max">Lorem ipsum dolor sit amet</p>
</div>

<div class="box">
  <p class="fit">Lorem ipsum dolor sit amet</p>
</div>
.box {
  margin: 0.5em auto 1em;
  padding: 0.5em 1em;
  width: 400px;
  background: #aaa;
}

.box p {
  margin: 0;
  padding: 0.5em 1em;
  background: #faa;
}

.min {
  width: min-content;
}

.max {
  width: max-content;
}

.fit {
  width: fit-content;
}

これでは max-contentfit-content の違いが分からないのでもうちょっと文章を長くしてみましょう。

min-content, max-content, fit-content 2

min-content, max-content, fit-content サンプル 2

違いが分かるでしょうか?

で、これは何が便利なの、ってところですが。
人によって使い道は様々でしょうが、そこそこ実用的かなと思うものを考えてみました。

まずは min-content から。
画像とキャプションの幅を揃え、水平中央配置します。画像の幅が決まっているなら最初から px 指定とかすればいいんですが、どんなサイズの画像が入るか分からない場合などに使えます。
最大値が必要なら max-width に数値で入れておくといいです。

画像サイズ依存のキャプション幅

min-content を使った画像サイズ依存のキャプション幅の例

<figure>
  <img src="..." alt="" />
  <figcaption>
    Lorem ipsum dolor sit amet...
  </figcaption>
</figure>
figure {
  margin: 1em auto;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

max-content では、float を使った横並びメニューのセンタリングが簡単にできます。
Flexbox 使えば? って話ではあるんですが、それはそれということで。

横並びメニューのセンタリング

max-content を使った横並びメニューのセンタリング例

<ul>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <!-- ... -->
</ul>
ul {
  margin: 1em auto;
  padding: 0.5em;
  background-color: #aaa;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

ul::after {
  display: block;
  clear: both;
  content: "";
}

li {
  float: left;
  padding: 0.5em 1em;
  background-color: #aaf;
  list-style-type: none;
}

li:nth-child(even) {
  background-color: #afa;
}

fit-content は…… max-content を使いたいけど親要素より大きなサイズにはしたくないときなんかに便利なんじゃないでしょうか。
いい例が思いつかなかったのでサンプルはありません。

それと、Webkit 系ブラウザには intrinsic という fit-content っぽい動きをするキーワードがあります。これは Chrome でも確認できます。試してみたところ、Android 4.1 のブラウザでも動きました。2.2 でも動作を確認しました。
min-intrinsic というのもあるようなのですが、実際に使えるのかどうか分かりません。試してみても効いてる気がしないんですよね……。
MDN には Webkit の intrinsicmax-content の古いものだと書かれていましたが、Bug 38919 – Add support for fit-content etc を見た感じだと fit-content と同じように扱ってるっぽいですね。

Leave a Reply