diff options
Diffstat (limited to 'files/fr/web/css/justify-content/index.html')
| -rw-r--r-- | files/fr/web/css/justify-content/index.html | 16 |
1 files changed, 4 insertions, 12 deletions
diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html index 64f81cec98..548aba3f62 100644 --- a/files/fr/web/css/justify-content/index.html +++ b/files/fr/web/css/justify-content/index.html @@ -16,13 +16,11 @@ translation_of: Web/CSS/justify-content <div>{{EmbedInteractiveExample("pages/css/justify-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> - <p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush:css no-line-numbers notranslate">/* Alignement « géométrique » */ +<pre class="brush:css no-line-numbers">/* Alignement « géométrique » */ justify-content: center; /* Éléments groupés au centre */ justify-content: start; /* Éléments groupés au début */ justify-content: end; /* Éléments groupés à la fin */ @@ -108,7 +106,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; /* Cette valeur peut être changée dans l'exemple */ justify-content: space-between; @@ -121,10 +119,7 @@ justify-content: unset; } </pre> -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html hidden"><div id="container"> <div></div> <div></div> <div></div> @@ -146,15 +141,12 @@ justify-content: unset; <option value="stretch">stretch</option> </select></pre> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js hidden">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> |