CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez les Flexbox CSS - La mise en page responsive Maîtriser les Flexbox en CSS

Maîtriser les Flexbox en CSS

Flex flow
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

Introduction aux Flexbox

Objectifs

Comprendre et utiliser les propriétés Flexbox en CSS. Apprendre à aligner et organiser les éléments HTML de manière responsive. Savoir manipuler flex-direction, flex-wrap et flex-flow pour des mises en page adaptatives.

Résumé

Cette leçon couvre les bases des Flexbox en CSS pour aligner des éléments HTML de manière efficace et responsive.

Description

Dans cette leçon, vous apprendrez à utiliser les Flexbox en CSS pour organiser et aligner vos éléments HTML de façon optimale. Vous commencerez par créer une page HTML et y ajouter des Flexbox containers. Ensuite, vous apprendrez à utiliser diverses propriétés Flexbox telles que flex-direction, flex-wrap et flex-flow. Vous verrez également comment ces propriétés peuvent transformer la manière dont vos éléments se comportent, en changeant leur direction, leur ordre et leur alignement.

Cette leçon s'adresse à toute personne souhaitant améliorer ses compétences en développement web et rendre ses interfaces plus flexibles et adaptatives. Nous détaillerons également comment intégrer le tout dans votre fichier CSS et visualiser les résultats dans un navigateur. Enfin, des exemples pratiques et des exercices vous aideront à consolider vos connaissances.

Voir plus

Questions fréquentes

Quelle propriété Flexbox permet de changer la direction des éléments ?
La propriété flex-direction permet de changer la direction des éléments dans un conteneur Flexbox.
Comment permettre aux éléments de retourner à la ligne si l'espace est insuffisant ?
Pour permettre aux éléments de retourner à la ligne si l'espace est insuffisant, vous devez utiliser la propriété flex-wrap avec la valeur wrap.
Quelle combinaison de propriétés est représentée par flex-flow ?
La propriété flex-flow est une combinaison de flex-direction et flex-wrap, définissant à la fois la direction et le comportement de retour à la ligne des éléments.
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