diff options
Diffstat (limited to 'files/fr/web/css/place-items/index.md')
| -rw-r--r-- | files/fr/web/css/place-items/index.md | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md new file mode 100644 index 0000000000..c5b670ba70 --- /dev/null +++ b/files/fr/web/css/place-items/index.md @@ -0,0 +1,271 @@ +--- +title: place-items +slug: Web/CSS/place-items +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/place-items +--- +<div>{{CSSRef}}</div> + +<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-items</code></strong> définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour <code>align-items</code> et la seconde est utilisée pour <code>justify-items</code>. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour <code>justify-items</code>.</p> + +<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeurs avec un mot-clé */ +place-items: auto center; +place-items: normal start; + +/* Alignement géométrique */ +place-items: center normal; +place-items: start auto; +place-items: end normal; +place-items: self-start auto; +place-items: self-end normal; +place-items: flex-start auto; +place-items: flex-end normal; +place-items: left auto; +place-items: right normal; + +/* Alignement par rapport à la ligne de base */ +place-items: baseline normal; +place-items: first baseline auto; +place-items: last baseline normal; +place-items: stretch auto; + +/* Valeurs globales */ +place-items: inherit; +place-items: initial; +place-items: unset; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La valeur utilisée est celle de <code>justify-items</code> pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas <code>auto</code> sera synonyme de <code>normal</code>.</dd> + <dt><code>normal</code></dt> + <dd>L'effet de ce mot-clé depend du mode de disposition utilisé : + <ul> + <li>Pour les dispositions en bloc, ce mot-clé est synonyme de <code>start</code>.</li> + <li>Pour les dispositions absolues, ce mot-clé se comporte comme <code>start</code> pour les éléments remplacés ou comme <code>stretch</code> pour tous les autres éléments.</li> + <li>Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.</li> + <li>Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée<em>.</em></li> + <li>Pour les dispositions en grille, ce mot-clé se comporte comme <code>stretch</code> sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de <code>start</code>.</li> + </ul> + </dd> + <dt><code>start</code></dt> + <dd>L'élément est aligné au début de l'axe dans la direction correspondante.</dd> + <dt><code>end</code></dt> + <dd>L'élément est aligné à la fin de l'axe dans la direction correspondante.</dd> + <dt><code>flex-start</code></dt> + <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.<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>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.<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>Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.</dd> + <dt><code>self-end</code></dt> + <dd>Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.</dd> + <dt><code>center</code></dt> + <dd>L'élément est centré le long de l'axe correspondant.</dd> + <dt><code>left</code></dt> + <dd>L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd> + <dt><code>right</code></dt> + <dd>L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</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, 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="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#container { + height:200px; + width: 240px; + place-items: center; /* Cette valeur peut être modifiée dans l'exemple */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} +</pre> + +<pre class="brush: css hidden">div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +}</pre> + +<pre class="brush: html hidden"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">place-items: </label> + <select id="values"> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> + </select> +</div> +</pre> + +<pre class="brush: js hidden">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.placeItems = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p> + +<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-items-property", "place-items")}}</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-items.flex_context")}}</p> + +<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3> + +<p>{{Compat("css.properties.place-items.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-items")}}</li> + <li>{{cssxref("justify-items")}}</li> + </ul> + </li> + <li>{{cssxref("justify-self")}}</li> + <li>{{cssxref("align-self")}}</li> +</ul> |