From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/justify-self/index.html | 213 ------------------------------- files/fr/web/css/justify-self/index.md | 213 +++++++++++++++++++++++++++++++ 2 files changed, 213 insertions(+), 213 deletions(-) delete mode 100644 files/fr/web/css/justify-self/index.html create mode 100644 files/fr/web/css/justify-self/index.md (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 deleted file mode 100644 index 7537fad71c..0000000000 --- a/files/fr/web/css/justify-self/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -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

- - diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md new file mode 100644 index 0000000000..7537fad71c --- /dev/null +++ b/files/fr/web/css/justify-self/index.md @@ -0,0 +1,213 @@ +--- +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