CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comprendre la Propriété Flex-Grow en CSS

Comprendre la Propriété Flex-Grow en CSS

Flex-grow
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

A l'issue de cette vidéo, vous serez à même de :

- Comprendre le fonctionnement de la propriété flex-grow.

- Appliquer flex-grow pour ajuster la taille des éléments dans un container flex.

- Utiliser différentes valeurs de flex-grow de manière efficace pour des mises en page responsive.

Cette leçon explique l'usage de la propriété flex-grow pour ajuster la taille des items dans un container flex.

Dans cette leçon, nous allons examiner les caractéristiques de la propriété flex-grow et son application sur les éléments d'un container flex. La propriété flex-grow permet aux items de s'étendre pour occuper l'espace disponible dans un container flex. Elle accepte des valeurs numériques sans unité qui fonctionnent comme des proportions. Par défaut, ces valeurs sont à 0, ce qui signifie que les items ne s'étendent pas. En appliquant flex-grow = 1 à tous les items, ils se partagent de manière équitable l'espace disponible. Cependant, en définissant flex-grow = 2 pour un des items, ce dernier occupera deux fois plus d'espace que les autres.

Cette flexibilité peut être particulièrement utile dans des scénarios où vous avez besoin d'une disposition dynamique et adaptable, assurant que les éléments s'ajustent parfaitement quelle que soit la taille de l'écran ou du conteneur parent. Nous allons également voir des démonstrations pratiques pour illustrer comment l'utilisation de valeurs différentes de flex-grow affecte l'affichage de vos éléments flex.

Voir plus
Questions réponses
Qu'est-ce que la propriété flex-grow en CSS?
La propriété flex-grow en CSS permet de définir la possibilité pour un item d'un container flex de grandir pour occuper l'espace disponible.
Quelle est la valeur par défaut de flex-grow pour les items d'un container flex?
La valeur par défaut de flex-grow pour les items d'un container flex est 0, ce qui signifie que les items ne s’étendent pas pour occuper l’espace supplémentaire.
Comment une valeur flex-grow de 2 affecte-t-elle la taille d'un item par rapport aux autres?
Un item avec flex-grow de 2 prendra deux fois plus d'espace disponible qu'un item avec flex-grow de 1.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !