diff options
Diffstat (limited to 'files/fr/web/css/place-self/index.md')
| -rw-r--r-- | files/fr/web/css/place-self/index.md | 158 |
1 files changed, 70 insertions, 88 deletions
diff --git a/files/fr/web/css/place-self/index.md b/files/fr/web/css/place-self/index.md index e996026df7..83f854910a 100644 --- a/files/fr/web/css/place-self/index.md +++ b/files/fr/web/css/place-self/index.md @@ -8,15 +8,16 @@ tags: - Reference translation_of: Web/CSS/place-self --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <code><strong>place</strong></code><strong><code>-self</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour <code>align-self</code> et la seconde pour <code>justify-self</code>. S'il n'y a pas de seconde valeur, la première sera également utilisée pour <code>justify-self</code>.</p> +La propriété **`place`\*\***`-self`\*\* est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. -<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div> +{{EmbedInteractiveExample("pages/css/place-self.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ place-self: auto center; place-self: normal start; @@ -40,89 +41,70 @@ place-self: stretch auto; /* Valeurs globales */ place-self: inherit; place-self: initial; -place-self: unset;</pre> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.</dd> - <dt><code>normal</code></dt> - <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé : - <ul> - <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 éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme <code>stretch</code></li> - <li>Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li> - <li>Pour les éléments disposés en blocs, 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>self-start</code></dt> - <dd>Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.</dd> - <dt><code>self-end</code></dt> - <dd>Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.</dd> - <dt><code>flex-start</code></dt> - <dd>Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.</dd> - <dt><code>flex-end</code></dt> - <dd>Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.</dd> - <dt><code>center</code></dt> - <dd>La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.</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> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +place-self: unset; +``` + +### Valeurs + +- `auto` + - : La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent. +- `normal` + + - : Ce mot-clé aura un sens différent selon le mode de disposition utilisé : + + - 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 éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme `stretch` + - Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée. + - Pour les éléments disposés en blocs, 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`. + +- `self-start` + - : Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc. +- `self-end` + - : Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc. +- `flex-start` + - : Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne. +- `flex-end` + - : Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne. +- `center` + - : La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction. +- `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. + +### Syntaxe formelle {{CSSSyntax}} -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-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> - -<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3> - -<p>{{Compat("css.properties.place-self.flex_context")}}</p> - -<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3> - -<p>{{Compat("css.properties.place-self.grid_context")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> - <li>Les propriétés détaillées correspondantes - <ul> - <li>{{cssxref("align-self")}}</li> - <li>{{cssxref("justify-self")}}</li> - </ul> - </li> -</ul> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. | + +{{CSSInfo}} + +## Compatibilité des navigateurs + +### Prise en charge pour les dispositions flexibles + +{{Compat("css.properties.place-self.flex_context")}} + +### Prise en charge pour les grilles + +{{Compat("css.properties.place-self.grid_context")}} + +## Voir aussi + +- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_ +- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_ +- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_ +- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) +- Les propriétés détaillées correspondantes + + - {{cssxref("align-self")}} + - {{cssxref("justify-self")}} |