Propriété CSS justify-items

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>

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>

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.

Support de Navigateurs

29.0 21.0
-webkit-
11+ 28.0 18.0
-moz-
9.0 6.1
-webkit-
17+


Trouvez-vous cela utile?

Articles Associées