W3Docs

Apparence

Français

Propriété CSS justify-items ​

La propriété justify-items définit la valeur par défaut de justify-self pour toutes les boîtes enfants, leur donnant une manière par défaut de justifier chaque boîte le long de l’axe approprié. Contrairement à justify-self, qui cible des éléments individuels, justify-items s’applique à l’ensemble du conteneur.

La propriété justify-items est principalement utilisée avec les mises en page Grid, mais s’applique aussi à :

  • éléments positionnés absolument
  • conteneurs grid

Remarque : justify-items affecte principalement les conteneurs grid et les éléments positionnés absolument. Dans les mises en page flexbox, cette propriété est ignorée.

Initial Valueauto
Applies toGrid containers and absolutely positioned elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.justifyItems = "start";

Syntaxe ​

Valeurs de CSS justify-items

css
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 : justify-items avec la valeur "start" ​

Exemple de code CSS justify-items

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Résultat ​

CSS justify-items start

Exemple : justify-items avec la valeur "center" ​

Exemple justify-items CSS center

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Exemple : justify-items avec la valeur "first-baseline" ​

Exemple de la propriété justify-items avec la valeur "first-baseline" :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Exemple : justify-items avec la valeur "self-end" ​

Exemple de la propriété justify-items avec la valeur "self-end" :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>
Try it Yourself »

Valeurs ​

ValueDescription
autoSi la boîte n’a pas de parent, ou est positionnée absolument, la valeur auto représente normal.
normalL’effet dépend du mode de mise en page : <br>• Mises en page Block : se comporte comme start. <br>• Mises en page positionnées absolument : se comporte comme start pour les éléments remplacés, et stretch pour les autres. <br>• Cellules de tableau : ignoré. <br>• Flexbox : ignoré. <br>• Mises en page Grid : se comporte comme stretch, sauf pour les éléments avec un ratio d’aspect ou une taille intrinsèque, où il se comporte comme start.
startTous les éléments sont positionnés les uns contre les autres sur le bord de début (gauche) du conteneur.
endTous les éléments sont positionnés les uns contre les autres sur le bord de fin (droite) du conteneur.
flex-startLes éléments sont placés au début du conteneur.
flex-endLes éléments sont placés à la fin du conteneur.
self-startL’élément peut se placer lui-même sur le bord du conteneur en fonction de son propre côté de début.
self-endL’élément peut se placer lui-même sur le bord du conteneur en fonction de son propre côté de fin.
centerLes éléments sont positionnés les uns à côté des autres vers le centre du conteneur.
leftLes éléments sont placés les uns à côté des autres 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.
rightLes éléments sont placés les uns à côté des autres 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.
baselineAligne tous les éléments d’un groupe en faisant correspondre leurs lignes de base d’alignement.
first-baselineAligne tous les éléments d’un groupe en faisant correspondre leurs premières lignes de base d’alignement.
last-baselineAligne tous les éléments d’un groupe en faisant correspondre leurs dernières lignes de base d’alignement.
stretchÉtire l’élément pour qu’il s’adapte au conteneur le long de l’axe en ligne/principal.
safeSi la taille de l’élément dépasse le conteneur d’alignement, l’élément est aligné comme si le mode d’alignement était start.
unsafeQuelle que soit la taille de l’élément et du conteneur d’alignement, la valeur d’alignement est respectée.
legacyMot-clé hérité pour la compatibilité ascendante. Se mappe à flex-start, flex-end ou center selon le mode de mise en page. N’affecte pas l’héritage.
initialFait utiliser à la propriété sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Practice ​

What does the CSS 'justify-items' property do?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.