Flex-shrink

La propriété flex-shrink est une sous-propriété du module Flexible Box Layout (Flexbox). Elle définit la possibilité pour un item flex de se réduire si nécessaire lorsqu'il n'y a pas assez d'espace dans une rangée. Elle accepte une valeur sans unité, qui sert d'évaluation proportionnelle. Cette valeur ne peut pas être négative.

Lorsqu'elle est omise, la valeur par défaut est 1 (ce qui signifie que l'item ne rétrécit pas par défaut), et le facteur de rétrécissement est multiplié par le flex basis lorsqu'il distribue l'espace négatif aux items flex. Qu'est-ce que l'espace négatif ? C'est l'espace qui excède la dimension du container principal. Avec flex-shrink, on répartit cet espace négatif, en multipliant pour chaque item sa taille initiale par le ratio de flex-shrink. Bref, à l'inverse de flex-grow, qui sert à répartir de l'espace positif entre les items en permettant leur agrandissement selon certaines proportions, flex-shrink sert à répondre à la question : “comment rétrécir de manière ordonnée mes items pour tout faire rentrer dans le container ?”

Par exemple, imaginons qu'on veuille distribuer l'espace entre les items flex de façon à ce que l'un d'eux ait toujours deux fois plus d'espace négatif que les autres (c'est à dire qu'il soit l'item sur lequel on fera porter la plus grande partie du rétrécissement pour arriver à tout faire tenir...). Pour cela, on donne la valeur 2 à flex-shrink. Un item ayant cette valeur se réduira deux fois plus vite qu'un item ayant un flex-shrink égal à 1.

Syntaxe

//CSS
flex-shrink: <number>

.flex-item { flex-shrink: 2; }

Démo

See the Pen gpeaVw by Pierre Choffe (@pierrechoffe) on CodePen.

Pour une analyse et des cas d'usage de flex-shrink, consultez l'article Guide de Flexbox : n'oubliez pas flex-shrink.


Exemples d’utilisation dans La Cascade :

Layout sur 12 colonnes avec Flexbox, par Landon Schropp
Guide de Flexbox : n'oubliez pas flex-shrink.

Autres ressources à consulter sur ce sujet :


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d'inspiration pour vos propres designs.