Outils CSS

Gratuit Generateur de dimensionnement CSS stretch

Generez du CSS utilisant le mot-cle stretch pour le dimensionnement fill-available dans les layouts block, flex, grid et absolus.

Chargement de l'outil...

Qu'est-ce que Generateur de dimensionnement CSS stretch ?

Le mot-cle CSS stretch (Chrome 138+) est la valeur standard pour le dimensionnement fill-available, remplacant -webkit-fill-available et -moz-available. width: stretch utilise margin-box sizing, contrairement a width: 100% qui utilise content-box et deborde avec padding ou bordure.

Réponse rapide

width: stretch ou height: stretch pour un dimensionnement fill-available sans debordement. Chrome 138+, Firefox 130+, Safari 18.2+.

Last updated: 2026-05-30

Limites

  • Support limite aux navigateurs recents.
  • Ne fonctionne pas sur les elements inline.
  • Peut interagir avec les proprietes d'alignement flex/grid.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez le contexte de mise en page (block, flex, grid, position absolue).
  2. Choisissez l'axe a etirer.
  3. Consultez la note specifique au contexte.
  4. Copiez le CSS genere.

A quoi il sert

  • Remplacer width: 100% sur les inputs qui debordent.
  • Standardiser fill-available en remplacant les prefixes.
  • Etirer un element positionne sans valeurs top/right/bottom/left.

Cas d'usage

Exemples concrets

Exemple

Input pleine largeur sans debordement

width: stretch fait rentrer la margin-box dans le conteneur, contrairement a width: 100%.

Exemple

Migration depuis fill-available prefxe

Remplacez -webkit-fill-available et -moz-available par width: stretch.

Erreurs frequentes

  • S'attendre au meme comportement que width: 100%.
  • Utiliser stretch sur un flex item avec align-items: stretch.
  • Supposer que stretch fonctionne en contexte inline.

Vérification

  1. Inspectez l'element et verifiez l'absence de debordement.
  2. Redimensionnez la fenetre pour confirmer l'adaptation.

FAQ

Questions sur Generateur de dimensionnement CSS stretch

Difference avec width: 100%?

stretch utilise margin-box sizing, 100% utilise content-box.

Fonctionne en mode d'ecriture vertical?

Oui, stretch respecte le mode d'ecriture.

Difference avec fill-available?

Meme valeur. stretch est le nom canonique.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi