diff options
Diffstat (limited to 'files/fr/web/css/place-content/index.md')
| -rw-r--r-- | files/fr/web/css/place-content/index.md | 274 |
1 files changed, 129 insertions, 145 deletions
diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 58064fcb1f..479ae64def 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -8,15 +8,14 @@ tags: - Reference translation_of: Web/CSS/place-content --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p> +La propriété raccourcie **`place`\*\***`-content`\*\* permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement. -<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div +{{EmbedInteractiveExample("pages/css/place-content.html")}}Syntaxe -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="brush: css no-line-numbers">/* Valeurs décrivant l'alignement */ +```css +/* Valeurs décrivant l'alignement */ /* Note : align-content ne gère pas les valeurs left et right */ place-content: center start; place-content: start center; @@ -39,55 +38,52 @@ place-content: stretch space-evenly; /* Valeurs globales */ place-content: inherit; place-content: initial; -place-content: unset;</pre> - -<p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p> - -<div class="warning"> -<p><strong>Attention :</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p> -</div> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>start</code></dt> - <dd>Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.</dd> - <dt><code>end</code></dt> - <dd>Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.</dd> - <dt><code>flex-start</code></dt> - <dd>Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>start</code>.</dd> - <dt><code>flex-end</code></dt> - <dd>Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>end</code>.</dd> - <dt><code>center</code></dt> - <dd>Les éléments sont alignés au centre du conteneur dans l'axe correspondant.</dd> - <dt><code>left</code></dt> - <dd>Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd> - <dt><code>right</code></dt> - <dd>Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd> - <dt><code>space-between</code></dt> - <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.</dd> - <dt><code>baseline<br> - first baseline</code><br> - <code>last baseline</code></dt> - <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br> - The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd> - <dt><code>space-around</code></dt> - <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.</dd> - <dt><code>space-evenly</code></dt> - <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.</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 correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +place-content: unset; +``` + +La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour `justify-content`. + +> **Attention :** Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide. + +### Valeurs + +- `start` + - : Les éléments sont alignés vers le début du conteneur pour l'axe correspondant. +- `end` + - : Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant. +- `flex-start` + - : Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de `start`. +- `flex-end` + - : Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de `end`. +- `center` + - : Les éléments sont alignés au centre du conteneur dans l'axe correspondant. +- `left` + - : Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (_inline axis_), cette valeur sera synonyme de `start`. +- `right` + - : Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (_inline axis_), cette valeur sera synonyme de `start`. +- `space-between` + - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe. +- `baseline first baseline` + `last baseline` + - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. + The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. +- `space-around` + - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément. +- `space-evenly` + - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur. +- `stretch` + - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur. + +### Syntaxe formelle {{CSSSyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">#container { +```css +#container { display: flex; height:240px; width: 240px; @@ -98,7 +94,7 @@ place-content: unset;</pre> place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */ } -div > div { +div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; @@ -113,63 +109,66 @@ div > div { font-size: 14px; height: 50px; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div class="small">Lorem</div> - <div class="small">Lorem<br/>ipsum</div> - <div class="large">Lorem</div> - <div class="large">Lorem<br/>impsum</div> - <div class="large"></div> - <div class="large"></div> -</div> -</pre> - -<pre class="hidden brush:html"><code>writing-mode:</code><select id="writingMode"> - <option value="horizontal-tb" selected>horizontal-tb</option> - <option value="vertical-rl">vertical-rl</option> - <option value="vertical-lr">vertical-lr</option> - <option value="sideways-rl">sideways-rl</option> - <option value="sideways-lr">sideways-lr</option> -</select><code>;</code><br/> -<code>direction:</code><select id="direction"> - <option value="ltr" selected>ltr</option> - <option value="rtl">rtl</option> -</select><code>;</code><br/> -<code>place-content:</code><select id="alignContentAlignment"> - <option value="normal">normal</option> - <option value="first baseline">first baseline</option> - <option value="last baseline">last baseline</option> - <option value="baseline">baseline</option> - <option value="space-between">space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly" selected>space-evenly</option> - <option value="stretch">stretch</option> - <option value="center">center</option> - <option value="start">start</option> - <option value="end">end</option> - <option value="flex-start">flex-start</option> - <option value="flex-end">flex-end</option> -</select> -<select id="justifyContentAlignment"> - <option value="normal">normal</option> - <option value="space-between">space-between</option> - <option value="space-around">space-around</option> - <option value="space-evenly">space-evenly</option> - <option value="stretch">stretch</option> - <option value="center" selected>center</option> - <option value="start">start</option> - <option value="end">end</option> - <option value="flex-start">flex-start</option> - <option value="flex-end">flex-end</option> - <option value="left">left</option> - <option value="right">right</option> -</select><code>;</code> -</pre> - -<pre class="brush: js hidden">var update = function () { +``` + +### HTML + +```html +<div id="container"> + <div class="small">Lorem</div> + <div class="small">Lorem<br/>ipsum</div> + <div class="large">Lorem</div> + <div class="large">Lorem<br/>impsum</div> + <div class="large"></div> + <div class="large"></div> +</div> +``` + +```html hidden +<code>writing-mode:</code><select id="writingMode"> + <option value="horizontal-tb" selected>horizontal-tb</option> + <option value="vertical-rl">vertical-rl</option> + <option value="vertical-lr">vertical-lr</option> + <option value="sideways-rl">sideways-rl</option> + <option value="sideways-lr">sideways-lr</option> +</select><code>;</code><br/> +<code>direction:</code><select id="direction"> + <option value="ltr" selected>ltr</option> + <option value="rtl">rtl</option> +</select><code>;</code><br/> +<code>place-content:</code><select id="alignContentAlignment"> + <option value="normal">normal</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + <option value="baseline">baseline</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly" selected>space-evenly</option> + <option value="stretch">stretch</option> + <option value="center">center</option> + <option value="start">start</option> + <option value="end">end</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> +</select> +<select id="justifyContentAlignment"> + <option value="normal">normal</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + <option value="stretch">stretch</option> + <option value="center" selected>center</option> + <option value="start">start</option> + <option value="end">end</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="left">left</option> + <option value="right">right</option> +</select><code>;</code> +``` + +```js hidden +var update = function () { document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; } @@ -187,53 +186,38 @@ var direction = document.getElementById("direction"); direction.addEventListener("change", function (evt) { document.getElementById("container").style.direction = evt.target.value; }); -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples", "370", "300")}}</p> +{{EmbedLiveSample("Exemples", "370", "300")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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", "#propdef-place-content", "place content")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.place-content")}}</p> +{{Compat("css.properties.place-content")}} -<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3> +### Prise en charge pour les dispositions flexibles -<p>{{Compat("css.properties.place-content.flex_context")}}</p> +{{Compat("css.properties.place-content.flex_context")}} -<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3> +### Prise en charge pour les grilles -<p>{{Compat("css.properties.place-content.grid_context")}}</p> +{{Compat("css.properties.place-content.grid_context")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles en CSS</a></li> - <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li> - <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">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>La propriété {{cssxref("align-content")}}</li> - <li>La propriété {{cssxref("justify-content")}}</li> -</ul> +- [Utiliser les boîtes flexibles en CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) +- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_ +- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ +- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) +- La propriété {{cssxref("align-content")}} +- La propriété {{cssxref("justify-content")}} |