Guide de Flexbox : n'oubliez pas flex-shrink

Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes.

Par

NdT : En complément de l'article de Landon Schropp sur les mises en page sur 12 colonnes, l'article de Noah Blon fait un focus sur une propriété de flexbox un peu compliquée de prime abord, flex-shrink.

En apprenant à utiliser flexbox, j’ai été captivé par la façon dont les items pouvaient s’adapter à leur container, en particulier par la façon dont ils pouvaient s’agrandir — mais je me suis rendu compte récemment qu’il était tout aussi important de comprendre comment ils pouvaient rétrécir. Vous allez comprendre tout de suite.

Un cas d’usage typique de flexbox : on a un ensemble d’items qu’on veut répartir de manière régulière dans une rangée. Quelque chose comme ça :

See the Pen Figure 1 by Noah Blon (@noahblon) on CodePen.

Nous créons un contexte flex à l’intérieur d’un container via display: flex;. Les items flex sont espacés régulièrement le long de l’axe principal grâce à justify-content: space-between. Tout va bien… jusqu’à ce qu’on ajoute de nouveaux items.

See the Pen Figure 2 by Noah Blon (@noahblon) on CodePen.

Argh ! les images sont écrabouillées ! Tout ça parce que par défaut la valeur de flex-shrink sur les items situés dans un contexte flex est fixée à 1. Par conséquent, à chaque fois que la dimension globale de l’ensemble d’items flex dépasse la taille de son élément contenant, les items rétrécissent pour pouvoir entrer dans le container.

Pour corriger cela, rien de plus facile : on ajoute flex-shrink: 0 à chaque item qui doit conserver une dimension fixe. En mettant un overflow: hidden sur le container, on résout le problème des images qui dépassent.

See the Pen Figure 3 by Noah Blon (@noahblon) on CodePen.

Voici un exemple un peu plus compliqué. Nous avons un style typique d’application mobile native qui ressemble à ceci :

See the Pen Figure 4 by Noah Blon (@noahblon) on CodePen.

Un header et un footer de dimension fixe sont attachés en haut et en bas du viewport et une surface de contenu flexible rempli l’espace restant. La partie principale doit défiler lorsque le contenu dépasse, et le header et le footer doivent rester bien en place.

Pour réaliser ce schéma, nous indiquons que .app doit prendre toute la taille du viewport, nous donnons un contexte flex ainsi qu’une flex-direction verticale. Notre header et notre footer ont une hauteur fixe, et la partie principale s’agrandit ou se rétrécit pour s’adapter à l’espace. Contrairement à flex-shrink, la valeur par défaut de flex-grow est 0, ce qui signifie que les items flex ne s’agrandiront pas à moins que vous ne le spécifiiez.

Cependant, nous avons un problème lorsque nous commençons à ajouter du contenu. Les éléments qui devaient avoir une dimension fixe commencent à rétrécir lorsque le contenu de .main dépasse.

See the Pen Figure 5 by Noah Blon (@noahblon) on CodePen.

Il y a deux raisons à cela. Tout d’abord, comme nous le savons déjà, tous les items flex ont une valeur de flex-shrink par défaut égale à 1. Ils rétréciront si le contenu dépasse le container correspondant au contexte flex. Ensuite, c’est la dimension totale du container .main qui est utilisée dans les calculs de flex, et non pas sa seule partie visible — et ceci parce que, par défaut, la valeur de flex-basis d’un item est auto. La flex-basis est la base utilisée pour calculer la façon dont les items vont être flexibles et une valeur de auto signifie que c’est la dimension totale qui est prise en considération. Pour corriger cela, nous supprimons le rétrécissement du header et du footer en leur donnant une valeur de flex-shrink égale à 0.

See the Pen Figure 6 by Noah Blon (@noahblon) on CodePen.

Vous rencontrerez souvent ce genre de problèmes en travaillant avec flexbox. Lorsque je commence une mise en page, je réfléchis d’abord à la répartition entre items à taille fixe et items flexibles. Je regarde également si j’ai du contenu qui va dépasser. En gardant ceci à l’esprit, la mise en page avec flexbox devient une question de “désactivation” du rétrécissement (shrinking) sur les items qui doivent conserver une taille fixe. Les items flexibles sont réglés d’une manière qui leur permet de s’agrandir (grow) ou de rétrécir (shrink), et le dépassement de contenu (overflow) est traité si nécessaire.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur Flexbox parus dans la Cascade.


Du même auteur, dans la Cascade :

Guide de Flexbox : space-between, l'oublié

Articles sur les mêmes thèmes dans la Cascade :

Layout sur 12 colonnes avec flexbox


original paru le dans le blog de Noah Blon Code after Reading.

Sur l’auteur : est développeur principal chez The Nerdery à Minneapolis. Il aime le design, la technologie et la créativité. On peut le suivre sur son site, sur CodePen et sur Twitter.

Traduit avec l’aimable autorisation de Code after Reading et de l’auteur.
Copyright Code after Reading © 2015.