CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez les Flexbox CSS - La mise en page responsive Maîtrisez l'Alignement Vertical avec Align Self en Flexbox

Maîtrisez l'Alignement Vertical avec Align Self en Flexbox

Aligner chacun des éléments indépendamment de l'ensemble
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

Comprendre la Propriété Align Self

Objectifs

Les objectifs de cette vidéo sont :
- Comprendre l'utilisation de la propriété Align Self.
- Savoir appliquer les différentes valeurs d'Align Self.
- Apprendre à créer des mises en page flexibles et personnalisées en CSS.

Résumé

À travers cette leçon, découvrez comment utiliser la propriété Align Self en CSS Flexbox pour ajuster l'alignement vertical des éléments de manière indépendante.

Description

Dans cette leçon, nous explorons en détail l'utilisation de la propriété Align Self en CSS Flexbox. Cette propriété est essentielle pour modifier l'alignement vertical d'un élément sans affecter les autres éléments du conteneur Flex. Nous allons démontrer comment appliquer les différentes valeurs possibles pour Align Self, telles que FlexStart, FlexEnd, Center, Baseline et Stretch. Vous verrez comment chaque valeur modifie l'alignement de l'élément en question et comment combiner cette propriété avec d'autres pour une mise en page flexible et responsive.

Voir plus

Questions fréquentes

Quelles sont les valeurs possibles de la propriété Align Self en CSS Flexbox ?
Les valeurs possibles pour la propriété Align Self sont : FlexStart, FlexEnd, Center, Baseline, Stretch.
Comment la propriété Align Self diffère-t-elle de Align Items ?
Align Self permet de changer l'alignement vertical d'un élément spécifique sans affecter les autres éléments, tandis qu'Align Items définit l'alignement vertical pour tous les éléments enfants dans le conteneur.
Peut-on utiliser Align Self avec des unités autres que FlexStart et FlexEnd ?
Oui, en plus de FlexStart et FlexEnd, on peut également utiliser Center, Baseline, et Stretch avec Align Self.
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