Grandir? C'est à dire?Et bien il se peut que dans une liste d'éléments, tu en aies un que tu veuilles afficher plus grand que les autres, avec flex-grow tu peux le faire, par défaut flex-grow vaut 0 cette valeur sert d'unité pour agrandir l'élément de façon proportionnelle par rapport à l'espace restant.
j'ai rien compris...Prenons un cas simple, imaginons que tu aies un conteneur de 800 pixels de large, avec 5 éléments de 100 pixels chacun. Par défaut ils ont tous un flex-grow à 0. Pour le premier, si on passe le flex-grow à 1 sur le premier élément, il prendra tout l'espace disponible en plus, soit 800 - (100 * 5) = 300 pixels. Avec ses 100 pixels de base, il fera donc 400 pixels.
Maintenant si on ajoute un flex-grow 1 au deuxième élément aussi, ils vont se partager l'espace disponible, donc les 300 pixels, mais à deux, donc 150 pixels chacun en plus des 100 pixels de base soit 250 pixels au total.
Ok jusque là je comprend.Maintenant si le deuxième a un flex-grow à 2 au lieu de 1, dans ce cas il va prendre deux fois plus que le premier. On a donc 3 part (2 + 1), le premier aura donc 300 * 1/3 = 100 pixels de plus, alors que le deuxième aura 300 * 2/3 = 200 pixels de plus.
Et ainsi de suite, l'unité utilisé permet donc de calculer de façon proportionnelle la taille de chaque élément, et cette taille va s'adapter par rapport à l'espace restant sur la ligne.
C'est bon pour moi, flex-grow pour agrandir les éléments, et un peu de mathématiques pour calculer tout ça.Garde tout de même à l'esprit que flex-grow permet d'agrandir les éléments uniquement par rapport à l'espace inutilisé, dans le cas où les éléments prennent exactement tout l'espace du conteneur, ils feront tous la même taille, peut importe la valeur de flex-grow que tu leur affecte :
Effectivement, il ne faut pas se tromper là dessus ! J'ai terminé cette partie