Maîtrisez Flexbox pour créer des mises en page web modernes, flexibles et responsives sans multiplier les règles CSS complexes.
Cette formation vous apprend à contrôler l’alignement, l’espacement, l’ordre et la taille des éléments grâce aux propriétés Flexbox, avant de mettre vos compétences en pratique dans la construction d’un site web complet.
Cette formation comprend 4 sections et 23 leçons.
Description de la formation Maîtrisez tous les éléments de votre site web grâce à FLEXBOX
Flexbox simplifie considérablement la création de mises en page adaptatives. Il permet d’aligner, espacer et organiser les éléments d’une page de manière flexible tout en facilitant leur adaptation aux différentes tailles d’écran.
Cette formation commence par les principes fondamentaux de Flexbox, son support par les navigateurs et le fonctionnement des axes utilisés pour organiser les éléments.
Vous étudierez ensuite les principales propriétés appliquées aux conteneurs, notamment flex-direction, justify-content, align-items, flex-wrap, align-content et flex-flow.
Le programme couvre également les propriétés appliquées aux éléments d’un conteneur : align-self, order, flex-basis, flex-grow, flex-shrink et flex.
La dernière partie propose un exemple pratique complet avec la construction d’un site depuis zéro : footer, navigation, centrage des éléments, cartes responsives, galerie d’images et sections associant texte et image.
Niveau : Débutant.
Langue : Français.
Ce que vous saurez faire après la formation
- comprendre pourquoi Flexbox est utilisé dans la création de mises en page web ;
- comprendre le principe des axes Flexbox ;
- organiser la direction des éléments avec
flex-direction; - aligner et répartir les éléments avec
justify-contentetalign-items; - gérer le retour à la ligne avec
flex-wrap; - contrôler plusieurs lignes avec
align-contentetflex-flow; - personnaliser l’alignement d’un élément avec
align-self; - modifier l’ordre d’affichage des éléments ;
- contrôler la taille et le comportement flexible des éléments avec
flex-basis,flex-growetflex-shrink; - utiliser la propriété raccourcie
flex; - créer un menu de navigation et un footer avec Flexbox ;
- centrer facilement des éléments horizontalement et verticalement ;
- créer des cartes responsives et une galerie d’images ;
- concevoir des mises en page plus fluides et adaptatives.
À qui s’adresse ce cours ?
Débutants en développement web
Pour découvrir Flexbox progressivement et apprendre à organiser les éléments d’une page web de manière plus simple.
Créateurs de sites web
Pour construire plus facilement des interfaces adaptatives pour les écrans mobiles, tablettes et ordinateurs.
Utilisateurs de HTML et CSS
Pour améliorer leurs mises en page et éviter de multiplier les règles complexes de positionnement et d’espacement.
Développeurs souhaitant améliorer leurs interfaces responsives
Pour maîtriser les propriétés Flexbox et les appliquer à des composants réels d’un site web.
Prérequis
- Aucun prérequis spécifique n’est indiqué sur la page de la formation.
Programme complet du cours
Découvre pourquoi les FlexBox existent et comment elles fonctionnent
1.1 Introduction
1.2 C’est quoi FlexBox et pourquoi l’utiliser
1.3 Comment FlexBox est supporté par les navigateurs
1.4 Découvre le principe d’axes associé à FlexBox
Les propriétés de FlexBox liées aux conteneurs
2.1 Flex-Direction
2.2 Justify-Content
2.3 Align-Items
2.4 Flex-Wrap
2.5 Align-Content
2.6 Flex-Flow
Les propriétés de FlexBox liées aux éléments du conteneur
3.1 Align-Self
3.2 Order
3.3 Flex-Basis
3.4 Flex-Grow
3.5 Flex-Shrink
3.6 Flex
Exemple pratique – Construction d’un site web depuis 0 grâce à FlexBox
4.1 Structure du site : Placer son footer en bas de page par défaut
4.2 Créer un menu de navigation
4.3 Créer un footer
4.4 Section principale : Centrer un élément horizontalement et verticalement
4.5 Mettre en place des cartes responsive
4.6 Créer une galerie d’images
4.7 Créer une section texte + image alternatif
Questions fréquentes
Comment fonctionne une formation vidéo ITFIT ?
La formation est organisée en sections et en leçons afin de progresser étape par étape. Vous découvrez d’abord les principes de Flexbox avant d’étudier ses propriétés puis de les appliquer à la construction d’un site web.
Comment cette formation Flexbox est-elle organisée ?
Cette formation comprend 4 sections et 23 leçons. Elle couvre les principes de Flexbox, les propriétés des conteneurs, les propriétés des éléments puis un exemple pratique complet de construction d’un site web.
Un exercice pratique est-il inclus ?
Oui. La dernière section est consacrée à un exemple pratique de construction d’un site web depuis zéro avec Flexbox, incluant notamment un menu, un footer, des cartes responsives et une galerie d’images.
Le responsive design est-il abordé ?
Oui. La formation montre comment Flexbox permet d’organiser et d’adapter les éléments d’une page aux différentes tailles d’écran.
Quelles propriétés Flexbox sont étudiées ?
Le programme couvre notamment flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink et flex.
Puis-je suivre cette formation à mon rythme ?
Oui. Vous pouvez progresser dans les différentes sections à votre rythme et revenir sur les propriétés ou l’exemple pratique lorsque vous souhaitez les revoir.
Un certificat est-il remis après la formation ?
Oui. Une formation ITFIT terminée donne accès à un certificat de fin de formation ITFIT attestant de la réalisation du parcours.
Le certificat ITFIT est-il une certification officielle ou un diplôme ?
Non. Le certificat ITFIT est une attestation de fin de formation délivrée par ITFIT. Il ne constitue ni une certification officielle d’un éditeur ni un diplôme d’État.
Formations recommandées
Deviens maître de ton contenu web grâce au HTML
Pour apprendre à structurer correctement vos pages web avant d’organiser leur mise en page avec Flexbox.
Les secrets de la mise en page avec CSS
Pour approfondir CSS et maîtriser les propriétés nécessaires à la création de sites web modernes et visuellement attractifs.
