Introduction
- Présentation du cours
- C’est quoi Flexbox ?
- Comment on faisait avant ?
Flexbox : Les bases
- Les navigateurs supportent Flexbox ?
- Avant-propos : La terminologie
- Comment utiliser Flexbox ?
- Quiz
- Installer votre environnement
Tout comprendre du Container
- flex-direction : Axe & sens de distribution des items
- Quiz : flex-direction
- display : flex ou inline-flex
- justify-content : Aligner les items sur l'axe principal (main axis)
- Quiz : justify-content
- flex-wrap : Forcer ou non l'alignement horizontal de tous nos items
- Quizz : flex-wrap
- align-items : Aligner les items verticalement
- Quiz : align-items
- flex-flow : Combiner la direction et le wrap
- Quiz: flex-flow
Tout comprendre des Items
- order : Changer l'ordre d'apparition de chaque item
- Quiz : order
- flex-grow : Grossir nos items avec de la proportionnalité
- Quiz : flex-grow
- flex-basis : Donner une taille initiale à nos items
- Quiz : flex-basis
- flex-shrink : Diminuer la taille de nos items avec de la proportionnalité
- Quiz : flex-shrink
- flex : Combiner les propriétés flex-grow, flex-shrink et flex-basis
- Quizz : flex
- align-self : Définir l'alignement précis d'un item
- Quizz : align-self
Aller plus loin
- Centrer avec Flexbox
- Les media queries
- Terminologie avancée
Flexbox par la pratique !
- Projet 1 : menu reponsive
- Projet 2 : Pagination
- Projet 3 - Layout de site web
- Projet 4 - Sticky Footer
- Projet 5 : Grille responsive
Bonus
- Ressource : Un jeu pour apprendre Flexbox !
- Entrainez-vous à Flexbox !
- Cheatsheet PDF (document récapitulatif)
- Mes autres formations
- Le mot de la fin…
