path: root/files/fr/web/css/justify-self/index.html

---
title: justify-self
slug: Web/CSS/justify-self
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/justify-self
---
<div>{{CSSRef}}</div>

<p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p>

<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p>

<ul>
 <li>Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.</li>
 <li>Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.</li>
 <li>Pour les dispositions des cellules de tableau : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
 <li>Pour les dispositions flexibles : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
 <li>Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
</ul>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* Mots-clés de base */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/* Alignement par rapport à l'axe */
justify-self: center;     /* L'élément est aligné au centre */
justify-self: start;      /* L'élément est aligné au début  */
justify-self: end;        /* L'élément est aligné à la fin  */
justify-self: flex-start; /* L'élément est aligné au début de l'axe */
justify-self: flex-end;   /* L'élément est aligné à la fin de l'axe */
justify-self: self-start;
justify-self: self-end;
justify-self: left;       /* L'élément est aligné à gauche */
justify-self: right;      /* L'élément est aligné à droite */

/* Alignement par rapport à la ligne de base */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/* Gestion du dépassement */
justify-self: safe center;
justify-self: unsafe center;

/* Valeurs globales */
justify-self: inherit;
justify-self: initial;
justify-self: unset;
</pre>

<p>Cette propriété peut être définie selon trois formes différentes :</p>

<ul>
 <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
 <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
 <li>Grâce à un positionnement :
  <ul>
   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
  </ul>
 </li>
</ul>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
 <dt><code>normal</code></dt>
 <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
 <ul>
  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
 </ul>
 </dd>
 <dt><code>start</code></dt>
 <dd>L'élément est aligné vers le début du conteneur pour l'axe en ligne.</dd>
 <dt><code>end</code></dt>
 <dd>L'élément est aligné vers la fin du conteneur pour l'axe en ligne.</dd>
 <dt><code>flex-start</code></dt>
 <dd>L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.<br>
 Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
 <dt><code>flex-end</code></dt>
 <dd>L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.<br>
 Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
 <dt><code>self-start</code></dt>
 <dd>L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.</dd>
 <dt><code>self-end</code></dt>
 <dd>L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.</dd>
 <dt><code>center</code></dt>
 <dd>L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.</dd>
 <dt><code>left</code></dt>
 <dd>L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
 <dt><code>right</code></dt>
 <dd>L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
 <dt><code>baseline<br>
 first baseline</code><br>
 <code>last baseline</code></dt>
 <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
 Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
 <dt><code>stretch</code></dt>
 <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
 <dt><code>safe</code></dt>
 <dd>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 <code>start</code> avait été utilisée.</dd>
 <dt><code>unsafe</code></dt>
 <dd>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.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{CSSSyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<div id="alignment_8">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper &gt; div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2,100px);
  height: 300px;
  width: 300px;
  grid-gap: 10px;
  align-content: space-between;
}
.item1 {
  justify-self: start;
}
.item3 {
  justify-self: end;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', '300', '300')}}</p>
</div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spécification</th>
   <th>État</th>
   <th>Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}</td>
   <td>{{Spec2('CSS3 Box Alignment')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{CSSInfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<h3 id="Prise_en_charge_pour_les_dispositions_flexiblesflexbox">Prise en charge pour les dispositions flexibles/<em>flexbox</em></h3>

<p>{{Compat("css.properties.justify-self.flex_context")}}</p>

<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>

<p>{{Compat("css.properties.justify-self.grid_context")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
 <li>La propriété {{cssxref("justify-items")}}</li>
 <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
</ul>