CSS - propriété place-self : guide pour débutants

Salut à toi, futur maître du CSS ! Aujourd'hui, nous allons plonger dans le monde merveilleux du CSS et explorer une petite propriété fort pratique appelée place-self. Ne t'inquiète pas si tu es nouveau dans ce domaine ; je vais te guider étape par étape, comme j'ai fait avec mes élèves depuis des années. À la fin de ce tutoriel, tu placing les éléments comme un pro !

Qu'est-ce que place-self ?

Avant de nous lancer dans le vif du sujet, penchons-nous sur les bases. La propriété place-self est une abbréviation pour régler à la fois les propriétés align-self et justify-self dans une seule déclaration. C'est comme tuer deux mouches avec une pierre, mais bien plus humain et lié au CSS !

Syntaxe

La syntaxe pour place-self est quite simple :

place-self: <align-self> <justify-self>;

Si vous fournissez seulement une valeur, elle s'applique à la fois à align-self et justify-self. C'est comme commander un menu combiné - vous obtenez deux chose pour le prix d'une !

Valeurs possibles

Maintenant, regardons les différentes valeurs que nous pouvons utiliser avec place-self. Je les présente dans un tableau, ce que je trouve aide les élèves à digérer l'information plus facilement :

Valeur	Description
auto	L'élément hérite du comportement align-self/justify-self de son conteneur parent
normal	L'élément est positionné selon le flux normal du document
start	Aligne l'élément au début du conteneur
end	Aligne l'élément à la fin du conteneur
center	Centre l'élément dans son conteneur
stretch	Étire l'élément pour qu'il remplisse le conteneur
flex-start	Aligne l'élément au début du conteneur flex
flex-end	Aligne l'élément à la fin du conteneur flex
self-start	Aligne l'élément au début de son propre axe
self-end	Aligne l'élément à la fin de son propre axe
baseline	Aligne l'élément à la ligne de base du conteneur
first baseline	Aligne l'élément à la première ligne de base du conteneur
last baseline	Aligne l'élément à la dernière ligne de base du conteneur

Applications

La propriété place-self s'applique aux éléments de la grille et aux éléments flex. C'est comme un pouvoir spécial que seuls certains super-héros (ou dans notre cas, éléments) possèdent !

Maintenant, plongeons dans quelques exemples pour voir comment ces valeurs fonctionnent en pratique.

CSS place-self - normal start Value

.item {
place-self: normal start;
}

Cette déclaration positionne l'élément selon le flux normal pour l'alignement et au début du conteneur pour la justification. C'est comme dire à ton élément : "Sois normal, mais commence à la beginning !"

CSS place-self - auto center Value

.item {
place-self: auto center;
}

Ici, nous disons : "Hérite de l'alignement de ton parent, mais centre-toi horizontalement." C'est parfait lorsque tu veux que ton élément suive le flux verticalement mais se distingue horizontalement.

CSS place-self - center normal Value

.item {
place-self: center normal;
}

Cela centre l'élément verticalement mais le garde dans le flux normal horizontalement. Imagine ton élément à une fête - il est au milieu de la pièce mais suit toujours les règles de la fête !

CSS place-self - end normal Value

.item {
place-self: end normal;
}

Cela aligne l'élément à la fin de son conteneur verticalement tout en le maintenant dans le flux normal horizontalement. C'est comme si ton élément était debout sur la pointe des pieds à l'arrière d'une foule !

CSS place-self - start auto Value

.item {
place-self: start auto;
}

Cette position place l'élément au début de son conteneur verticalement et hérite de l'alignement horizontal. C'est comme dire : "Je commencerai en haut, mais je suivrai le flux horizontalement."

CSS place-self - self-start auto Value

.item {
place-self: self-start auto;
}

Cela aligne l'élément à son propre bord de début verticalement et hérite de l'alignement horizontal. C'est comme si ton élément disait : "Je fais ma propre chose verticalement, mais je suis avec la foule horizontalement."

CSS place-self - self-end normal Value

.item {
place-self: self-end normal;
}

Cela aligne l'élément à son propre bord de fin verticalement et le maintient dans le flux normal horizontalement. C'est comme si ton élément atteignait pour le ciel avec ses pieds fermement sur terre !

CSS place-self - flex-start auto Value

.item {
place-self: flex-start auto;
}

Dans un conteneur flex, cela aligne l'élément au début du conteneur verticalement et hérite de l'alignement horizontal. C'est parfait pour les éléments flex qui veulent commencer en haut mais suivre le flux flex horizontalement.

CSS place-self - flex-end normal Value

.item {
place-self: flex-end normal;
}

Dans un conteneur flex, cela aligne l'élément à la fin du conteneur verticalement et le maintient dans le flux normal horizontalement. C'est comme si ton élément faisait un handstand !

CSS place-self - baseline normal Value

.item {
place-self: baseline normal;
}

Cela aligne la ligne de base de l'élément avec la ligne de base de son conteneur verticalement et le maintient dans le flux normal horizontalement. C'est génial pour aligner le texte entre différents éléments.

CSS place-self - last baseline normal Value

.item {
place-self: last baseline normal;
}

Similaire à baseline, mais utilise la dernière baseline si plusieurs existent. C'est comme s'assurer que ton élément a le dernier mot !

CSS place-self - stretch auto Value

.item {
place-self: stretch auto;
}

Cela étire l'élément pour remplir son conteneur verticalement et hérite de l'alignement horizontal. C'est comme si ton élément disait : "Je serai aussi grand que je peux être, mais je suivrai le flux horizontalement."

Et voilà, les amis ! Nous avons exploré la propriété place-self et ses différentes valeurs. Souviens-toi, la clé pour maîtriser le CSS est la pratique. Alors vas-y, joue avec ces valeurs, mélanges-les, et vois quels magnifiques layouts tu peux créer !

Dans mes années d'enseignement, j'ai découvert que les élèves qui expérimentent et s'amusent avec le CSS tendent à apprendre plus rapidement et à retenir plus. Alors n'ayez pas peur de vous lancer ! Qui sait ? Vous pourriez découvrir une combinaison qui deviendra votre style signature.

Bonne programmation, et puissent vos éléments toujours être parfaitement placés !

Credits: Image by storyset