Flexbox CSS – Le guide complet par la pratique
Apprenez à utiliser le module Flexbox Layout en CSS3 pour créer des sites web responsive plus simplement !
Utiliser le module Flexbox Layout
Créer des sites Responsive
Aligner horizontalement & verticalement
Ecrire du CSS plus efficacement
+ 5 projets pour s’entraîner
A la fin de cours vous serez capable de…
- Aligner vos éléments verticalement
- Créer une galerie / grille moderne
- Répartir correctement l’espacement
- Rendre tous vos sites responsives
- et bien plus !
Vous aurez accès à :
- Une F.A.Q où je répondrai à tout(es) vos questions / problèmes
- 3 projets (challenges) où vous serez mis à l’épreuve pour appliquer vos nouvelles connaissances (+ la correction pour chaque projet)
Dans ce cours, nous verrons le module Flexbox dans son intégralité :
Comprendre toutes propriétés du Container :
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
- flex-flow
Puis toutes les propriétés des items :
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Nous irons même plus loin avec les media queries qui nous permettrons de rendre nos sites responsives (adapté sur ordinateur, tablette et smartphone)
A la fin de ce cours, vous serez capable d’écrire du code CSS plus propre et plus professionnel.
BONUS : Vous aurez accès à un PDF récapitulatif avec des schémas simples et clairs !
Introduction
1
Présentation du cours
2
C’est quoi Flexbox ?
3
Comment on faisait avant ?
Flexbox : Les bases
1
Les navigateurs supportent Flexbox ?
2
Avant-propos : La terminologie
3
Comment utiliser Flexbox ?
4
Quiz
5
Installer votre environnement
Tout comprendre du Container
1
flex-direction : Axe & sens de distribution des items
2
Quiz : flex-direction
3
display : flex ou inline-flex
4
justify-content : Aligner les items sur l'axe principal (main axis)
5
Quiz : justify-content
6
flex-wrap : Forcer ou non l'alignement horizontal de tous nos items
7
Quizz : flex-wrap
8
align-items : Aligner les items verticalement
9
Quiz : align-items
10
flex-flow : Combiner la direction et le wrap
11
Quiz: flex-flow
Tout comprendre des Items
1
order : Changer l'ordre d'apparition de chaque item
2
Quiz : order
3
flex-grow : Grossir nos items avec de la proportionnalité
4
Quiz : flex-grow
5
flex-basis : Donner une taille initiale à nos items
6
Quiz : flex-basis
7
flex-shrink : Diminuer la taille de nos items avec de la proportionnalité
8
Quiz : flex-shrink
9
flex : Combiner les propriétés flex-grow, flex-shrink et flex-basis
10
Quizz : flex
11
align-self : Définir l'alignement précis d'un item
12
Quizz : align-self
Aller plus loin
1
Centrer avec Flexbox
2
Les media queries
3
Terminologie avancée
Flexbox par la pratique !
1
Projet 1 : menu reponsive
2
Projet 2 : Pagination
3
Projet 3 - Layout de site web
4
Projet 4 - Sticky Footer
5
Projet 5 : Grille responsive
Bonus
1
Ressource : Un jeu pour apprendre Flexbox !
2
Entrainez-vous à Flexbox !
3
Cheatsheet PDF (document récapitulatif)
4
Mes autres formations
5
Le mot de la fin…
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on WeCours are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
