oujood.com

Aligner les éléments enfants d'un conteneur avec justify-items

La propriété justify-items est utilisée sur le conteneur de type grille pour donner aux éléments enfants (éléments de la grille) un alignement dans le sens de la ligne.

chercher |

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éfautstretch
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57164510.1 44

Exemple : Aligner les éléments sur la fin de la ligne

      Copier le code

<!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.





Voir aussi nos tutoriel :

fonction md5

Calcule le md5 d'une chaîne

les grilles en bootstrap

Comment on utilise le système de grilles Bootstrap 3 pour deviser facilement les pages web en lignes et colonnes.

fonction chop, chop

Alias de rtrim