diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 20:15:31 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-17 20:15:31 +0200 |
commit | 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch) | |
tree | 09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr/web/css/align-items | |
parent | 3518481e9190f19bbf81741704f45cb3c1761758 (diff) | |
download | translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2 translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip |
Prepare CSS section for Markdown conversion (#2307)
* Removes summary / seoSummary classes
* Remove div class=hidden and some notranslate
* Remove hidden paragraphs for live sample
* Remove hidden paragraphs for live sample - take 2
* Remove other hidden div and p - updated w/ en-US when necessary
* Remove ids
* Remove notranslate class
* Fix typo which broke build
* remove div class='index'
* remove useless <span style=...>
* remove non typographical sups
* remove non typographical subs
* remove blockindicator and fix some div.note
* fix build :/
* remove useless classes
* fix build - again :x
* fix unhandled elements 1/N + embedlivesample build fail
* fix div.warning
* Fix fixable flaws - hoping to reduce error conversion
* Remove unecessary images (same as en-US)
* fix div notes
* fix warnings
* fix some dl handling
* fix dls
* Fix a bunch of conversion errors
* rm unhandled figures
* Fix other set of issues and revamp easing-function page
* Fix some one-offs conversion errors (incl. deki files)
* fix the rest of one-off conversion issues
* Fix last dl standing
Diffstat (limited to 'files/fr/web/css/align-items')
-rw-r--r-- | files/fr/web/css/align-items/index.html | 29 |
1 files changed, 10 insertions, 19 deletions
diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html index 1774fe755e..69e1fcd440 100644 --- a/files/fr/web/css/align-items/index.html +++ b/files/fr/web/css/align-items/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/align-items --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p> +<p>La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</p> + +<p>La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossary/Grid_Areas">la zone de grille</a> correspondante.</p> <p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p> <div>{{EmbedInteractiveExample("pages/css/align-items.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'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -79,9 +79,6 @@ align-items: unset; <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd> <dt><code>self-end</code></dt> <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd> -</dl> - -<dl> <dt><code>baseline</code></dt> <dt><code>first baseline<br> last baseline</code></dt> @@ -92,18 +89,16 @@ align-items: unset; <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd> <dt><code>unsafe</code></dt> <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd> - <dt> - <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> - </dt> </dl> +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> {{csssyntax}} <h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4]">#container { +<pre class="brush: css">#container { height:200px; width: 240px; align-items: center; /* Cette valeur peut être modifiée dans l'exemple */ @@ -218,10 +213,7 @@ select { </div> </pre> -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var values = document.getElementById('values'); +<pre class="brush: js hidden">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); @@ -233,7 +225,6 @@ display.addEventListener('change', function (evt) { container.className = evt.target.value; }); </pre> -</div> <h3 id="Résultat">Résultat</h3> @@ -278,10 +269,10 @@ display.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 CSS</a></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>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><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles CSS</a></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>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><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-self")}}</li> </ul> |