Introduction aux propriétés FlexGrow et FlexShrink
Objectifs
À l'issue de cette vidéo, vous serez capable de :
- Utiliser la propriété FlexGrow pour ajuster la proportion de croissance des éléments.
- Employer FlexShrink pour gérer la réduction proportionnelle des éléments.
- Combiner ces propriétés avec Flex pour un code plus concis et efficace.
Résumé
Apprenez à utiliser les propriétés FlexGrow et FlexShrink en CSS Flexbox pour contrôler la taille relative des éléments dans un container flexible.
Description
Dans cette leçon, nous explorons les propriétés CSS essentielles liées à Flexbox. Nous commençons par la propriété FlexGrow, qui permet à une boîte de grossir proportionnellement davantage que ses voisines au sein du même conteneur. Vous apprendrez comment définir la propriété FlexGrow à 2 pour un élément particulier, et comment distribuer l'espace supplémentaire en utilisant des valeurs proportionnelles adaptées pour chaque boîte.
Ensuite, nous étudierons la propriété inverse, FlexShrink, qui contrôle la façon dont les éléments rétrécissent relativement aux autres lorsqu'un espace négatif apparaît. L'exemple met en lumière l'utilisation de FlexShrink définie à 2 pour réduire la taille d'un élément spécifique par rapport aux autres.
Enfin, nous aborderons la propriété combinée Flex, qui permet de spécifier en une seule déclaration les valeurs de FlexGrow, FlexShrink, et FlexBasis. Vous verrez comment utiliser cette propriété pour simplifier et optimiser votre code CSS.
Questions - réponses
Programme détaillé
Module 1 - Flex
Module 2 - Exercices pratiques
Facebook
Twitter
Linkedin
Email
flex: 1 1 0px;
Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.
Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
Explications claires