Je vous propose un tuto vidéo sur les flexbox avancés. Nous allons ici parler des propriétés suivantes :
- flex-grow,
- flex-shrink,
- flex-basis.
Au programme de ce tuto Flexbox Avancé
Nous allons étudier les valeurs de ces propriétés Flexbox et comprendre ainsi leurs comportements, mais aussi le comportement par défaut de Flexbox.
Une fois que nous aurons bien compris ces propriétés CSS liées à Flexbox, nous ferons 2 applications afin de consolider ces nouvelles connaissances. Je mets les codes de ces deux applications à votre disposition avec le cours.
Un QCM de fin vous permettra de valider vos connaissances.
Je reste disponible dans le salon d'entraide pour répondre à vos questions sur Flexbox.
Pour en savoir plus sur Flexbox :
Table des matières de cette formation CSS (durée : 45m28s)
-
Théorie
- Comportement par défaut des contenus 00:06:31
- Modification de la valeur de flex-grow 00:04:19
- Beaucoup d'infos dans un contenu 00:01:43
- Compréhension du rôle de flex-grow 00:03:20
- Modification de la valeur de flex-basis 00:03:02
- Modification de la valeur de flex-shrink 00:02:29
- Compréhension du rôle de flex-shrink 00:02:52
- Propriété raccourcie 00:00:48
-
Pratique
- Barre de navigation 00:12:26
- Mise en page en colonne de type journal 00:06:20
-
Conclusion
- Conclusion 00:01:38
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci beaucoup pour votre tuto qui est vraiment bien fait et super bien expliqué comme d'ailleurs tous vos tutos
-
Des propriétés de flex que je ne connaissais pas et pourtant bien utiles et pratiques quand on sait s'en servir. Eh bien c'est chose faite ! Ravie d'avoir suivi ce cours. Merci Carl !
-
Super petit tuto. J’ai bien hâte de testé dans une nav. Alain
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Que contient le fichier source ?Le code source des applications
note moyenne
avis laissés