Dans le cours : CSS : Maîtriser les Flexbox

Travailler avec la propriété flex-shrink - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Travailler avec la propriété flex-shrink

“

Dans cette vidéo, la situation est identique à la vidéo précédente, à une exception près : flex-basis est ici égal à 500 pixels et non pas à 300 pixels comme dans la vidéo précédente. Mes deux éléments li, mes deux flex items, ont maintenant tous les deux une largeur de 500 pixels. Ensemble, ils ont une largeur de 1000 pixels. Oui mais, voilà, mon élément ul, mon flex container, a lui une largeur de 960 pixels, donc il n'est pas assez large pour contenir ces deux éléments li. On pourrait donc s'attendre à ce que ces éléments li débordent du flex container. Pourtant, il n'en est rien. Ces deux éléments ne débordent pas du flex container. Ils ont tous les deux la même largeur et ils se répartissent uniformément la largeur disponible. Que se passe-t-il ? Je vais placer ma souris sur le premier des deux éléments li, ici dans mes outils de développement. Là, je vois clairement cette zone hachurée qui représente la largeur de 500 pixels. Je vois également que la largeur effective de cet élément est de 467 pixels, donc c'est un peu plus petit que les 500 pixels demandés. Le navigateur a donc réduit la largeur de cet élément, comme me l'indique d'ailleurs la petite flèche qui pointe vers la gauche. Pour le deuxième élément, c'est exactement la même chose. Vous voyez que sa largeur effective est de 467 pixels. Là aussi, le navigateur a réduit la largeur de cet élément, comme me l'indique la petite flèche qui pointe vers la gauche. Pourquoi le navigateur a-t-il pris la liberté de réduire la largeur de mes éléments ? Parce que, dans le CSS, nous avons cette propriété qui s'appelle flex-shrink. To shrink, en anglais, ça signifie réduire, rétrécir. La valeur par défaut de flex-shrink, c'est 1. Par défaut, mon navigateur est autorisé à rétrécir la taille de mes éléments, et c'est précisément ce qu'il fait dans ce cas-ci. Je vais maintenant changer la valeur de flex-shrink, je vais le rendre égal à 0. Maintenant, mon navigateur n'est plus autorisé à réduire et à rétrécir la taille de mes éléments. Résultat des courses, mes éléments conservent leur largeur de 500 pixels et, donc, ils débordent de mon flex container. Maintenant, je vais m'adresser de manière séparée à mes deux éléments. Pour le premier élément, flex-shrink sera égal à 1, ce qui est, rappelez-vous, la valeur par défaut, et, pour le second flex- shrink sera égal à 2. Je n'ai d'ailleurs plus besoin, maintenant, de cette ligne 19. Voilà qui est fait. Au niveau de mon document, voilà ce qui se passe pour le moment. Mes éléments ne débordent plus de mon flex container. Ils se répartissent l'espace disponible, mais ils ne se répartissent plus cet espace de manière uniforme. Vous voyez que l'élément numéro 1 est un peu plus grand que l'élément numéro 2. Allons inspecter ce qu'il se passe. Vous voyez que mon élément numéro 1 a une largeur de 478 pixels, ce ne sont pas tout à fait les 500 pixels demandés. Le navigateur a réduit la largeur de cet élément, nous avons une petite flèche qui pointe vers la gauche. Maintenant, le deuxième élément. Vous voyez que, lui, il a une largeur de 456 pixels. Il n'est pas aussi large que l'élément numéro 1. Le navigateur a également réduit sa largeur, comme indiqué, d'ailleurs, par la petite flèche qui pointe vers la gauche. Le navigateur a réduit la largeur de mes deux éléments, mais il a réduit la largeur de l'élément numéro 2 deux fois plus vite que celle de l'élément numéro 1, parce que flex-shrink est égal à 2 pour l'élément numéro 2 et à 1 pour l'élément numéro 1. Voilà le fonctionnement de la propriété flex-shrink du CSS. Rappelez-vous que sa valeur par défaut est 1 et, ça, c'est un petit piège parce que la valeur par défaut de flex-grow, c'est 0. Donc, par défaut, mon navigateur n'est pas autorisé à agrandir mes éléments, mais il est autorisé à les réduire.

Table des matières