From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/justify-self/index.html | 221 +++++++++++++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 files/fr/web/css/justify-self/index.html (limited to 'files/fr/web/css/justify-self') diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html new file mode 100644 index 0000000000..d093566da0 --- /dev/null +++ b/files/fr/web/css/justify-self/index.html @@ -0,0 +1,221 @@ +--- +title: justify-self +slug: Web/CSS/justify-self +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/justify-self +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
+ + + +

L'effet de cette propriété varie selon le mode de disposition utilisé :

+ + + +

Syntaxe

+ +
/* 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;
+
+ +

Cette propriété peut être définie selon trois formes différentes :

+ + + +

Valeurs

+ +
+
auto
+
La valeur utilisée est celle de la propriété justify-items définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, auto sera synonyme de normal.
+
normal
+
Ce mot-clé aura un sens différent selon le mode de disposition utilisé : +
    +
  • Pour une disposition en bloc, normal est synonyme de start.
    • +
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
    • +
+
+
start
+
L'élément est aligné vers le début du conteneur pour l'axe en ligne.
+
end
+
L'élément est aligné vers la fin du conteneur pour l'axe en ligne.
+
flex-start
+
L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.
+ 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 à start.
+
flex-end
+
L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.
+ 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 à end.
+
self-start
+
L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.
+
self-end
+
L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.
+
center
+
L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.
+
left
+
L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.
+
right
+
L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.
+
baseline
+ first baseline
+ last baseline
+
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.
+ Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
+
stretch
+
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.
+
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.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

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;
+}
+
+ +

HTML

+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '300', '300')}}

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}{{Spec2('CSS3 Box Alignment')}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles/flexbox

+ +

{{Compat("css.properties.justify-self.flex_context")}}

+ +

Prise en charge pour les grilles CSS

+ +

{{Compat("css.properties.justify-self.grid_context")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf