CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez les Flexbox CSS - La mise en page responsive Apprenez les Propriétés CSS Relatives à Flexbox

Apprenez les Propriétés CSS Relatives à Flexbox

Aligner ses éléments horizontalement et verticalement
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

Alignement et Arrangements avec Justify-Content et Align-Items

Objectifs

Les objectifs de cette vidéo sont de vous familiariser avec les propriétés justify-content et align-items, et de vous montrer comment les utiliser pour organiser et aligner vos contenus de manière flexible et esthétique.

Résumé

Maîtrisez l'agencement d'éléments en CSS à l'aide des propriétés justify-content et align-items.

Description

Cette leçon couvre en détail les propriétés CSS relatives aux Flexbox, vous permettant d'aligner et d'arranger horizontalement et verticalement vos éléments au sein d'un conteneur. Initialement, la propriété justify-content est expliquée, qui permet de distribuer les éléments le long de l'axe principal avec des valeurs telles que flex-start, flex-end, center, space-between, et space-around.

Ensuite, nous explorons la propriété align-items pour l'alignement vertical. Vous allez découvrir comment utiliser des valeurs comme flex-start, center, flex-end et stretch pour un agencement optimal de vos contenus.

Enfin, cette formation pratique montre comment combiner ces propriétés pour obtenir une disposition flexible et réactive de vos éléments, aussi bien horizontalement que verticalement, même lorsque vous travaillez avec plusieurs lignes d'éléments grâce à flex-wrap.

Voir plus

Questions fréquentes

Quelle est la valeur par défaut de la propriété justify-content?
La valeur par défaut de justify-content est stretch.
Que fait la valeur flex-end pour la propriété justify-content?
La valeur flex-end aligne les éléments au bord droit du conteneur.
Comment la propriété align-items peut-elle être utilisée pour centrer verticalement les éléments?
En utilisant la valeur center avec align-items, les éléments sont centrés verticalement dans le conteneur.
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