1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: place-self
slug: Web/CSS/place-self
tags:
- CSS
- Propriété
- Propriété raccourcie
- Reference
translation_of: Web/CSS/place-self
---
<div>{{CSSRef}}</div>
<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>
<div>{{EmbedInteractiveExample("pages/css/place-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>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css">/* Valeurs avec un mot-clé */
place-self: auto center;
place-self: normal start;
/* Alignement géométrique */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;
/* Alignement relatif à la ligne de base */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
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>
{{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>
<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_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>
|
