CSS - propriété justify-self : Maîtriser l'alignement des éléments de la grille

Salut à toi, futur.e sorcier.e CSS ! Aujourd'hui, nous allons plonger dans le monde magique de la propriété justify-self. En tant que ton enseignant de quartier en informatique, je suis là pour te guider dans cette aventure passionnante. Alors, prends ton bâton virtuel (clavier), et lançons quelques sorts CSS !

Qu'est-ce que justify-self ?

Avant de rentrer dans les détails, comprenons ce que fait la propriété justify-self. Imagine que tu as un conteneur de grille, et à l'intérieur, tu as divers éléments de grille. La propriété justify-self te permet d'aligner ces éléments individuels le long de l'axe horizontal (inline). C'est comme donner à chaque élément son propre styliste personnel pour décider où il devrait se tenir sous les feux de la rampe !

Syntaxe et valeurs possibles

La syntaxe de base pour justify-self est simple :

.grid-item {
justify-self: value;
}

Maintenant, regardons toutes les valeurs possibles que nous pouvons utiliser :

Valeur	Description
auto	Le navigateur décide de l'alignement
normal	Similaire à auto
stretch	Étire l'élément pour remplir la cellule
start	Aligne à la的开始 de la cellule
end	Aligne à la fin de la cellule
center	Centre l'élément dans la cellule
flex-start	Aligne à la 开始 (pour les conteneurs flex)
flex-end	Aligne à la fin (pour les conteneurs flex)
self-start	Aligne à la 开始 en fonction de la direction de l'élément
self-end	Aligne à la fin en fonction de la direction de l'élément
left	Aligne à gauche de la cellule
right	Aligne à droite de la cellule
baseline	Aligne à la ligne de base de la cellule
last baseline	Aligne à la dernière ligne de base de la cellule

Whaou, c'est une liste impressionnante ! Ne t'inquiète pas si c'est accablant ; nous allons les détailler avec des exemples.

Applications

Avant de plonger dans les exemples, il est important de noter que justify-self s'applique à :

• Les éléments de grille
• Les éléments positionnés de manière absolue dont le bloc conteneur est un conteneur de grille

Maintenant, explorons chaque valeur avec des exemples pratiques !

Valeur CSS justify-self - auto

.grid-item {
justify-self: auto;
}

Avec auto, le navigateur prend le relais. C'est comme dire à ton élément : "Va où tu penses que c'est le mieux !" Habituellement, cela se comporte de manière similaire à stretch.

Valeur CSS justify-self - normal

.grid-item {
justify-self: normal;
}

normal est la valeur par défaut et agit généralement comme stretch pour les éléments de grille. C'est le "Je sens la chance" des valeurs justify-self !

Valeur CSS justify-self - stretch

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

Cette valeur étire l'élément pour remplir la largeur entière de sa cellule de grille. C'est comme dire à ton élément : "Va grand ou rentre chez toi !"

Valeur CSS justify-self - start

.grid-item {
justify-self: start;
}

Cela aligne l'élément à la buse de la cellule. Pense à l'élément comme s'il s'agrippe au mur gauche de sa pièce.

Valeur CSS justify-self - end

.grid-item {
justify-self: end;
}

Opposé de start, cela pousse l'élément à la fin de la cellule. C'est comme si l'élément joue à cache-cache derrière le mur droit.

Valeur CSS justify-self - center

.grid-item {
justify-self: center;
}

Cela place l'élément tout au centre de sa cellule. Parfait pour les éléments qui aiment être le centre de l'attention !

Valeurs CSS justify-self - flex-start et flex-end

.grid-item {
justify-self: flex-start; /* ou flex-end */
}

Ces valeurs sont similaires à start et end mais sont généralement utilisées dans des contextes flex. Dans les mises en page de grille, elles se comportent généralement comme start et end.

Valeurs CSS justify-self - self-start et self-end

.grid-item {
justify-self: self-start; /* ou self-end */
}

Ces valeurs alignent l'élément en fonction de sa propre direction. Si la direction de l'élément est ltr (de gauche à droite), self-start sera le même que start. C'est comme si l'élément a une boussole toujours pointant vers son nord personnel !

Valeurs CSS justify-self - left et right

.grid-item {
justify-self: left; /* ou right */
}

Ces valeurs alignent l'élément à la gauche ou à la droite de la cellule, indépendamment du mode d'écriture ou de la direction. Elles sont comme les cousins têtus de start et end qui savent toujours où ils veulent être.

Valeurs CSS justify-self - baseline et last baseline

.grid-item {
justify-self: baseline; /* ou last baseline */
}

Ces valeurs alignent l'élément avec la ligne de base de la cellule. C'est particulièrement utile lorsque vous avez un contenu texte et que vous souhaitez l'aligner parfaitement avec d'autres textes dans des cellules adjacentes.

Mettre tout ensemble

Maintenant que nous avons exploré toutes ces valeurs, créons un exemple amusant qui montre plusieurs valeurs justify-self en action :

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

Dans cet exemple, nous avons un conteneur de grille avec quatre éléments, chacun démontrant une valeur justify-self différente. C'est comme un petit défilé de mode CSS, où chaque élément montre son style unique !

Et voilà, mes chers élèves ! Nous avons fait le voyage à travers le pays de justify-self, explorant ses multiples facettes et possibilités. Souviens-toi, CSS est tout au sujet de l'expérimentation et de la créativité. N'ayez pas peur de mélanger et d'associer ces valeurs pour créer des mises en page uniques.

Alors, à mesure que nous terminons cette leçon, je suis rappelé d'un sage vieux CSS qui a dit un jour : "With great power comes great responsibility... to create awesome layouts!" (Avec grand pouvoir vient une grande responsabilité... à créer des layouts incroyables !) Alors, vas-y, expérimente, et que tes grilles soient toujours parfaitement alignées !

Credits: Image by storyset