Flexbox - Shrink - Html/Css

Il y a aussi le flex-shrink, qui fait le contraire du flex grow, c'est à dire qu'il va réduire la taille de certains éléments s'il n'y a pas assez de place disponible. Tu te souviens tout au début, on avait vu que si les éléments prenaient trop de place par rapport à l'espace disponible, ils rétrécissaient tous, et si on utilisait le flex-wrap, on le faisait passer à la ligne pour qu'ils puissent faire leur taille normale?

Oui je me rappelle bien de ça

Et bien dans le cas où l'on utilise pas le flex-wrap, on peut utiliser flex-shrink pour que certains rétrécissent plus que d'autre. Par défaut la valeur de flex-shrink est de 1. Donc si par exemple on a 5 éléments de 100 pixels dans un conteneur de 400 pixels, cela fait 100 pixels manquant pour 5 part, donc chaque élément va réduire de 100/5 = 20 pixels.



mais si on change le flex-shrink du 3ème élément avec une valeur à 6, cela fait un total de 1+1+6+1+1 = 10 parts. Donc chaque élément va réduire de 100 * 1/10 = 10 pixels, sauf le 3ème qui réduira de 100 * 6/10 = 60 pixels.



J'ai compris aussi, c'est assez simple en fait, une fois qu'on a compris comment calculer les parts.

En pixel c'est simple, surtout que je prends des exemples qui arrondissent bien les chiffres, en pourcentage, ça peut compliquer un peu les calculs, mais la logique reste toujours la même.
J'ai terminé cette partie