Flexbox: Contrôler la réduction dans la direction Flex avec flex-shrink

Dans ce tutoriel, nous abordons le modificateur de propriété flex-shrink en CSS. Cette option fait partie du modèle Flexbox, qui vous permet de créer des mises en page flexibles s'adaptant à différentes tailles d'écran. Alors que dans la dernière vidéo nous avons traité de flex-grow, qui contrôle comment les éléments peuvent pousser dans le conteneur Flex, cette fois-ci, il s'agit de la réduction des éléments lorsque l'espace dans le conteneur est inférieur à la base flex fixée. Dans ce billet, vous apprendrez comment limiter ou ajuster de manière ciblée la réduction des éléments Flexbox avec flex-shrink.

Principales conclusions

• flex-shrink détermine dans quelle mesure un élément peut rétrécir s'il n'y a pas suffisamment d'espace disponible.
• La valeur par défaut de flex-shrink est 1, ce qui signifie qu'un élément peut occuper de l'espace en fonction de la disponibilité et de la définition d'autres éléments dans le conteneur.
• On peut utiliser flex-shrink pour établir un rapport spécifique de rétrécissement entre plusieurs éléments.

Guide étape par étape

Je vais maintenant vous expliquer les étapes pour optimiser l'utilisation de flex-shrink. Chaque étape sera accompagnée de variables de capture d'écran que vous pourrez remplacer ultérieurement par les captures d'écran du tutoriel vidéo.

Tout d'abord, voici une application Flexbox de base en CSS. Vous avez trois éléments avec une base flex de 100 pixels. Si suffisamment d'espace est disponible dans le conteneur Flex, tout reste comme prévu.

Nous réduisons maintenant la hauteur du conteneur à 200 pixels. Dans ce cas, l'espace requis est supérieur à la hauteur du conteneur. Les éléments ont toujours une base flex de 100 pixels et ne peuvent donc pas rétrécir, car nous avons défini flex-shrink à 0.

Pour activer le mécanisme de rétrécissement, modifiez la valeur de flex-shrink. Définissez-la à 1 pour l'élément de navigation. Vous informez ainsi le CSS que l'élément de navigation doit rétrécir au maximum.

Enregistrez maintenant vos modifications, et vous verrez que l'élément de navigation rétrécit de manière proportionnelle jusqu'à la hauteur minimale définie par le contenu.

Si vous souhaitez que tous les éléments rétrécissent uniformément, définissez flex-shrink à 1 pour tous les éléments. Si le conteneur devient plus petit que l'espace requis, tous les éléments rétréciront en conséquence.

Pour illustrer comment les différentes valeurs de flex-shrink affectent la mise en page, choisissez un ratio tel que 1:1:2. Dans ce cas, la section principale (main) reçoit la plus grande part de rétrécissement, tandis que les autres éléments reçoivent des parts plus petites chacun.

Cela signifie que l'élément principal prendra plus de place en cas de manque d'espace ou en nécessitera moins que les deux autres éléments. Toutefois, si vous souhaitez une adaptation de mise en page équilibrée, vous pouvez également définir flex-shrink à la même valeur pour tous les éléments.

Enfin, vous pouvez combiner les valeurs de flex-grow, flex-shrink et flex-basis pour plus de souplesse lors de la conception de la mise en page en CSS. Assurez-vous de les adapter en fonction des exigences de votre design.

Résumé

Dans ce tutoriel, vous avez appris comment utiliser flex-shrink en CSS pour contrôler le changement de taille des éléments Flexbox. Vous avez découvert différentes façons de définir la rétraction et comment cela affecte la mise en page.