diff options
Diffstat (limited to 'files/fr/web/css/place-content/index.html')
| -rw-r--r-- | files/fr/web/css/place-content/index.html | 22 |
1 files changed, 8 insertions, 14 deletions
diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html index 4dc5d23259..58064fcb1f 100644 --- a/files/fr/web/css/place-content/index.html +++ b/files/fr/web/css/place-content/index.html @@ -12,9 +12,7 @@ translation_of: Web/CSS/place-content <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> -<div>{{EmbedInteractiveExample("pages/css/place-content.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> +<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div <h2 id="Syntaxe">Syntaxe</h2> @@ -46,7 +44,7 @@ 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> +<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> @@ -89,7 +87,7 @@ place-content: unset;</pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[7]">#container { +<pre class="brush: css">#container { display: flex; height:240px; width: 240px; @@ -171,10 +169,7 @@ div > div { </select><code>;</code> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var update = function () { +<pre class="brush: js hidden">var update = function () { document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; } @@ -193,7 +188,6 @@ direction.addEventListener("change", function (evt) { document.getElementById("container").style.direction = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -235,10 +229,10 @@ direction.addEventListener("change", function (evt) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles en CSS</a></li> - <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_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> |