CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez les Flexbox CSS - La mise en page responsive Utilisation de Flexbox pour une Navigation Responsive

Utilisation de Flexbox pour une Navigation Responsive

Une navigation de site internet responsive gérée par flexbox
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtrisez les Flexbox CSS - La mise en page responsive
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
24,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
24,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Création d'une Navigation Flexible avec Media Queries

Objectifs

Apprendre à utiliser Flexbox pour créer des mises en page adaptatives.
Maîtriser les media queries pour adapter le design en fonction de la taille de l'écran.

Résumé

Apprenez à utiliser Flexbox pour créer une navigation dynamique et adaptable grâce aux media queries en HTML et CSS.

Description

Dans cette leçon, nous allons voir comment créer une navigation responsive en utilisant Flexbox et les media queries en HTML et CSS. Nous commençons par la création d'un fichier HTML de base avant de passer à la mise en forme CSS. Nous définissons la propriété display à flex pour l'élément ul.navigation, ce qui permet à notre menu de se comporter comme un flex container. Ensuite, nous utilisons flexflow pour contrôler la direction et le wrap des éléments de navigation, et justify-content pour aligner les éléments horizontalement. Nous intégrons également des media queries pour adapter le layout en fonction de la taille de l'écran: en dessous de 480 pixels, l'alignement devient vertical, tandis qu'entre 480 et 760 pixels, les éléments sont distribués avec space-around. Cette démonstration pratique vous montre comment améliorer l'adaptabilité de vos menus de navigation.

Voir plus

Questions fréquentes

Quelle propriété CSS permet de créer un conteneur flex ?
La propriété display avec la valeur flex permet de créer un conteneur flex.
Quelle media query utiliser pour les écrans de taille inférieure à 480 pixels ?
On utilise @media all and (max-width: 480px) pour cibler les écrans de taille inférieure à 480 pixels.
Quelle valeur de <em>justify-content</em> permet de distribuer les éléments avec des espaces de part et d'autre ?
La valeur space-around permet de distribuer les éléments avec des espaces avant, après et entre eux.
4 commentaires
4,3
4 votes
5
4
3
2
1
ericfreget_1
Il y a 2 mois
Formation très claire.
Par contre je suis déçu qu’aucun exemple incluant la gestion des images ne soit donné pour qu’elles se redimensionnent automatiquement.
M@d
Il y a 1 an
Très bonne formation dans l'ensemble. J'ai rencontré un problème d'affichage sur la partie consacrée à la navigation mobile avec header et footer fixe. En effet, j'ai suivi à la lettre vos instructions, mais lorsque je valide dans mon fichier app.css la ligne de code suivante le texte de mon article disparaît :

flex: 1 1 0px;

Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.

Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
benedicte.bertran
Il y a 3 ans
Explications pas à pas, simple, merci.
alain_nogues
Il y a 4 ans
Très bon pédagogue
Explications claires