はじめに
漫画『東京卍リベンジャーズ』の名セリフをオマージュしたタイトルですが、この記事はいたって真面目です。
実は Chrome 138 から、CSSで要素のサイズを指定する際に使える新しいキーワード stretch が追加されました。
この記事では、その stretch の概要や使い方について紹介します。
stretch とは？
stretch は、指定した要素がその親要素の使用可能なスペースを完全に埋めるようにサイズを拡大できるキーワードです。
一見 100% と似ていますが、決定的な違いは、box-sizing で指定されたボックスを基準にサイズを決めるのではなく、marginも含めた要素を基準にサイズを決める点です。
これにより、margin も含めて親要素内にピッタリ収めることができます。
以下のサンプルは、Chrome 138以降のバージョンで確認してください 🙏
See the Pen
width-stretch by degudegu2510 | Qiita (@degudegu2510)
on CodePen.
↓ このような違いがあります。
| Chrome 137 以前 | Chrome 138 以降 |
|---|---|
 |
 |
このサンプルでは、display: inline-blockを指定して、div 内のコンテンツに合うようにしています。
そのため、Chrome 137 以前とChrome 138 以降を比べると、width: stretch を指定している要素が 親の要素に合わせていることがわかると思います。
また、青い要素（width: 100%）と赤い要素（width: stretch）を比べると、
mariginの値だけ、親の要素からはみ出ているか、marginの値も加味して、親の要素からはみ出ないようになっています。
stretch の使い所
① 基本的な使い所 width
いままで、calc() 関数を使って、要素を飛び出ないように 100% - marginサイズ をしていたところを width: stretch に置き換えられるかと思います。
.item {
- margin: 16px;
- width: calc(100% - 32px); /* 100% - marginサイズ */
+ width: stretch;
}
② 基本的な使い所 height
子要素の高さを親要素に合わせたい時に、親要素の高さを指定していたところを height: stretch に置き換えられるかと思います。
.container {
- height: 300px;
}
.item {
- height: 100%;
+ height: stretch;
}
③ flex item や grid item を個別で、グリッドいっぱいにしたい時
align-content: stretch や align-items: stretch、justify-items: stretch では、flex item や grid item全部が1グリッド分いっぱいになっていたけど、個別に1グリッド分いっぱいにした時などにもつかるかと思います。
.container {
display: grid;
- align-items: stretch
}
.item {
+ height: stretch;
}
ブラウザの互換性
stretch は現時点（2025年6月）では Chrome 138 以降 でのみ対応しており、他のブラウザではまだ利用できません。
これまでは、以下のようなベンダープレフィックス付きのキーワードを使うことで、親要素にフィットさせる指定がされてきました。
Chrome / Edge / Safari：-webkit-fill-available
Firefox：-moz-available
そのため、現時点では stretch 単体ではなく、これらのキーワードと併用するのが安心です。
.item {
width: stretch;
width: -webkit-fill-available; /* Chrome, Safari */
width: -moz-available; /* Firefox */
}
ref
まとめ
stretch は、これまで width: 100% や height: 100% を使っていた場面を、より直感的かつ自然に記述できる新しいCSSキーワードです。
- margin を含めて親要素にぴったりフィット
- calc() を使わずにスッキリ書ける
- flex や grid の中でも、個別の要素に自然にフィットさせられる
など、利点も多く便利です。今後のCSSレイアウト設計で重宝するプロパティなることでしょう！
そうなったら、「まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎」
とみんなが言っていることでしょう！笑
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。
Views: 0
