stretch

概要

stretch キーワードは width や height プロパティで使用し、要素を親コンテナの利用可能なスペースいっぱいに拡張します。従来の width: 100% とは異なり、マージンやパディングを考慮した上で残りのスペースを埋めます。レスポンシブレイアウトでの柔軟なサイズ指定に役立ちます。

対応ブラウザ

基本構文

.fill-container {
  width: stretch;
  height: stretch;
}

実務での使いどころ

• コンテナ全体への拡張

  マージンやパディングを考慮しつつ、親要素の利用可能なスペースを完全に埋める要素を作成します。

注意点

アクセシビリティ

• 要素のサイズが動的に変わるため、コンテンツがはみ出さないよう overflow の処理を適切に行ってください。

参考リンク

• MDN Web Docs — stretch