Chaque élément utilise flex: grow shrink basis. Basis fournit la taille principale initiale avant répartition. Grow participe quand il reste de la place et shrink quand les tailles ne tiennent pas. Les facteurs sont des proportions, pas des pixels, et dépendent des autres éléments de la ligne.
Répartissez l’espace positif
Si deux éléments partent de 200px et qu’il reste 300px, grow 1 et 2 partagent le reste en une et deux parts : 100px et 200px. Les tailles deviennent environ 300px et 400px avant autres contraintes. Grow zéro ne participe pas. Un basis en pourcentage dépend de la taille intérieure du conteneur ; auto dépend de la taille applicable ou du contenu et doit être testé avec le vrai contenu.
Voyez shrink comme une négociation
L’espace négatif est pondéré par flex-shrink et la taille de base : des facteurs égaux ne retirent donc pas toujours le même nombre de pixels. Les minimums liés au contenu peuvent arrêter la réduction et provoquer un débordement. FlexWeave n’émet que flex : ajoutez min-width: 0 ou une contrainte réfléchie dans le composant après test des mots longs, images, contrôles et zoom. Shrink zéro protège un élément mais reporte la pression sur les autres.
Vérifiez le vrai composant
FlexWeave rend le modèle visuel validé avec le navigateur courant, mais ignore votre contenu, mode d’écriture, contrôles focalisables et largeurs prises en charge. Intégrez les règles au composant, gardez un ordre HTML cohérent et testez faible largeur, zoom, traductions longues, clavier et technologies d’assistance. Direction inversée et order ne prouvent jamais une bonne séquence de lecture. Conservez CSS et HTML sous gestion de versions, car la capsule ne garde aucun projet.