Propriété CSS justify-items

❮ Précédent Suivant ❯

La propriété justify-items définit justify-self par défaut pour toutes les boîtes enfants, en leur donnant à tous un moyen par défaut de justifier chaque case le long de l'axe approprié.

La propriété justify-items a obtenu utilisation avec l'intoduction de Flexbox et dispositions de la grille, mais elle est aussi appliquée à:

boîtes positionnées de façon absolue
boîtes du niveau bloc
position statique des boîtes positionnées de façon absolue
cellules de tableaux

Valeur initiale	legacy
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.justifyItems = "start";

Syntaxe

justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | safe | unsafe | legacy | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      #example {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 5px;
      justify-items: start;
      background-color: #ccc;
      }
      #example > div {
      padding: 10px;
      font-size: 20px;
      color: white;
      width: 100px;
      height:50px;
      }
      .one {
      background-color: #1c87c9;
      }
      .two {
      background-color: #8ebf42;
      }
      .three {
      background-color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-items</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la valeur "center":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      #example {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 5px;
      justify-items: center;
      background-color: #ccc;
      }
      #example > div {
      padding: 10px;
      font-size: 20px;
      color: white;
      width: 100px;
      height:50px;
      }
      .one {
      background-color: #1c87c9;
      }
      .two {
      background-color: #8ebf42;
      }
      .three {
      background-color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété justify-items</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Si la boîte n'a pas un parent, ou si elle est positionnée de façon absolue, la valeur "auto" représente "normal".
normal	L'effet de cette valeur dépend du mode de disposition: Pour les disposition en bloc, la valeur "normal" se comporte comme "start". Pour les dispositions positionnées de façon absolue, cette valeur se comporte comme "start" sur les boîtes positionnées de façon absolue qui sont remplacées, et comme "stretch" sur toutes les autres boîtes positionnées de façon absolue. Pour les dispositon de cellules de tableaux, cette propriété est ignorée. Pour les dispositions utilisant des boîtes flexibles, cette propriété est ignorée. Pour les dispositions en grille, cette valeur se comporte comme "stretch", sauf pour les boîtes qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas elle se comporte comme "start".
start	Tous les éléments sont positionnés l'un contre l'autre sur le bord du début (gauche) du conteneur.
end	Tous les éléments sont positionnés l'un contre l'autre sur le bord de la fin (droit) du conteneur.
flex-start	Éléments sont placés au début du conteneur.
flex-end	Éléments sont placés à la fin du conteneur.
self-start	L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de départ.
self-end	L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de la fin.
center	Éléments sont positionnés l'un à côté de l'autre vers le milieu du conteneur.
left	Éléments sont placés l'un à côté de l'autre vers le côté gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme "end".
right	Éléments sont placés l'un à côté de l'autre vers le côté droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme "start".
baseline first-baseline last-baseline	Aligne tous les éléments dans un groupe par rapport à l'alignement des lignes de base.
stretch	Élargit l'élément aux deux bords du conteneur verticalement et horizontalement pour l'insérer dans le conteneur.
safe	Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur "start" avait été utilisée.
unsafe	Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
legacy	La valeur est héritée par les éléments descendants de la boîte.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.