Comprendre et utiliser la propriété CSS justify-items
La propriété CSS justify-items permet de définir l'alignement horizontal des éléments d'un conteneur. Cette propriété s'applique aux éléments enfants d'un conteneur qui utilise un display de type grid ou flex.
Syntaxe générale
La syntaxe générale pour utiliser la propriété justify-items est la suivante :
.conteneur {
justify-items: [valeur];
}
la propriété css justify-items peut prendre une des valeurs suivates :
- start : aligne les éléments à gauche
- end : aligne les éléments à droite
- center : aligne les éléments au centre
- stretch : étire les éléments pour qu'ils remplissent tout l'espace horizontal disponible
- space-between : ajoute de l'espace égal entre chaque élément
- space-around : ajoute de l'espace égal entre chaque élément et les bords du conteneur
Il existe d'autres valeurs possibles pour la propriété CSS justify-items, mais elles ne sont pas considérées comme des valeurs standard et donc ne sont pas prises en charge par tous les navigateurs. Ces valeurs incluent :
- baseline : aligne les éléments sur la ligne de base
- first baseline : aligne les éléments sur la première ligne de base
- last baseline : aligne les éléments sur la dernière ligne de base
Il est important de noter que certaines de ces valeurs peuvent ne pas être prises en charge par tous les navigateurs, il est donc important de vérifier la compatibilité des navigateurs avant de les utiliser.
| Valeurs par défaut | stretch |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.justifyItems="center"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 45 | 10.1 | 44 |
Exemple : Aligner les éléments sur la fin de la ligne
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété justify-items</title>
<style>
h1{color:#003668;}
#conteneur {
width: 50%;
aspect-ratio: 2/1;
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: end;
}
#conteneur > div {
border: 1px solid black;
}
.blue {
background-color: lightblue;
width: 50%;
}
.red {
background-color: coral;
width: 40%;
}
.green {
background-color: lightgreen;
width: 60%;
}
</style>
</head>
<body>
<h1>CSS la propriété justify-items</h1>
<div id="conteneur">
<div class="red">ROUGE</div>
<div class="blue">BLEU</div>
<div class="green">VERT</div>
<div class="red">ROUGE</div>
</div>
</body>
</html>
Conseils et astuces pour utiliser la propriété CSS justify-items
La propriété CSS justify-items permet de définir comment les éléments d'un conteneur sont alignés horizontalement. Voici quelques conseils et astuces pour vous aider à utiliser cette propriété de manière efficace :
- 1 : Utilisez la propriété align-items pour aligner verticalement les éléments
La propriété justify-items s'occupe uniquement de l'alignement horizontal des éléments. Si vous voulez également aligner les éléments verticalement, vous devrez utiliser la propriété align-items.
- 2 : Utilisez la valeur "stretch" pour étirer les éléments à la taille du conteneur
La valeur "stretch" permet de faire en sorte que les éléments remplissent tout l'espace horizontal disponible dans le conteneur. Cela peut être utile si vous voulez que les éléments prennent toute la largeur du conteneur, même si leur taille est inférieure.
- 3 : Utilisez la valeur "space-around" pour ajouter de l'espace entre les éléments
La valeur "space-around" permet de faire en sorte que les éléments soient espacés également sur toute la largeur du conteneur, avec de l'espace égal entre chaque élément et les bords du conteneur. Cela peut être utile si vous voulez que les éléments aient un peu d'espace entre eux.
En résumé, la propriété justify-items est un outil puissant pour aligner horizontalement les éléments d'un conteneur flex. Utilisez-la en combinaison avec la propriété align-items pour obtenir un alignement complet des éléments. Expérimentez avec les différentes valeurs pour trouver celle qui convient le mieux à votre projet.