initial commit

1 files changed, 249 insertions, 0 deletions

diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..e0787aca03
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/index.html
@@ -0,0 +1,249 @@
+---
+title: CSS Box Alignment
+slug: Web/CSS/CSS_Box_Alignment
+tags:
+  - Alignement
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p>
+
+<div class="note">
+<p><strong>Note : </strong>La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p>
+</div>
+
+<h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2>
+
+<p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p>
+
+<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p>
+
+<h2 id="Exemples_simples">Exemples simples</h2>
+
+<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles</a>.</p>
+
+<h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3>
+
+<p>Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par <code>align-items</code> en utilisant {{cssxref("align-self")}} avec la valeur <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Alignement_pour_une_disposition_flexible_(flexbox)">Alignement pour une disposition flexible (<em>flexbox</em>)</h3>
+
+<p>Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec <code>justify-content</code> et selon l'axe secondaire avec <code>align-items</code>. Le premier objet surcharge la règle indiquée avec <code>align-items</code> grâce à la propriété <code>align-self</code> qui vaut ici <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Concepts_majeurs_et_terminologie">Concepts majeurs et terminologie</h2>
+
+<p>Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.</p>
+
+<h3 id="Liens_avec_les_modes_d'écriture">Liens avec les modes d'écriture</h3>
+
+<p>L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.</p>
+
+<h3 id="Deux_dimensions_pour_l'alignement">Deux dimensions pour l'alignement</h3>
+
+<p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+
+<p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par <code>align-</code>:</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut <code>row</code>, ces règles sont vraies mais si <code>flex-direction</code> vaut <code>column</code>, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés <code>justify-</code> permettent toujours d'aligner selon l'axe principal et les propriétés <code>align-</code> d'aligner selon l'axe secondaire.</p>
+
+<h3 id="Le_sujet_de_l'alignement_(alignment_subject)">Le sujet de l'alignement (<em>alignment subject</em>)</h3>
+
+<p>Le <strong>sujet de l'alignement</strong> est l'objet qu'on aligne. Pour <code>justify-self</code> ou <code>align-self</code>, ou lorsqu'on paramètre ces valeurs pour un group avec <code>justify-items</code> ou <code>align-items</code>, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés <code>justify-content</code> et <code>align-content</code> varient selon la méthode de disposition utilisée.</p>
+
+<h3 id="Le_conteneur_d'alignement_(alignment_container)">Le conteneur d'alignement (<em>alignment container</em>)</h3>
+
+<p>Le <strong>conteneur d'alignement</strong> est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.</p>
+
+<p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3>
+
+<p>Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (<em>fallback alignment</em>) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.</p>
+
+<h2 id="Types_d'alignement">Types d'alignement</h2>
+
+<p>Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.</p>
+
+<ul>
+ <li><strong>Alignement en position </strong>: la position du sujet est définie relativement à celle du conteneur.</li>
+ <li><strong>Alignement selon la ligne de base </strong>: ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.</li>
+ <li><strong>Alignement distribué </strong>: ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.</li>
+</ul>
+
+<h3 id="Alignement_en_position_avec_des_mots-clés">Alignement en position avec des mots-clés</h3>
+
+<p>Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour <code>justify-content</code>, <code>align-content</code> ainsi que pour <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>flex-end</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>En dehors des valeurs <em>physiques</em> <code>left</code> et <code>right</code> qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs <em>logiques</em> qui font référence au mode d'écriture du contenu.</p>
+
+<p>Si on prendre l'exemple d'une disposition en grille : en français, utiliser <code>justify-content</code> avec <code>start</code> déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur <code>start</code> regroupera les éléments sur le côté droit de la page.</p>
+
+<p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3>
+
+<p>Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec <code>justify-content</code>, <code>align-content</code> ou avec <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>L'alignement du contenu selon la ligne de base (c'est-à-dire avec <code>justify-content</code> ou <code>align-content</code>) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (<em>padding</em>) à l'intérieur de chaque boîte si nécessaire.</p>
+
+<p>L'alignement des éléments (<em>self alignment</em>) (c'est-à-dire avec <code>justify-self</code> ou <code>align-self</code> pour des sujets distincts ou avec <code>justify-items</code> et <code>align-items</code> pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.</p>
+
+<h3 id="Alignement_distribué">Alignement distribué</h3>
+
+<p>Les mots-clés permettant de décrire un <strong>alignement distribué</strong> sont utilisés avec les propriétés <code>align-content</code> et <code>justify-content</code>. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p>
+
+<h2 id="Gestion_du_dépassement">Gestion du dépassement</h2>
+
+<p>Les mots-clés <code>safe</code> et <code>unsafe</code> permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé <code>safe</code> alignera selon <code>start</code> si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.</p>
+
+<p>La valeur <code>unsafe</code> permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.</p>
+
+<h2 id="Espaces_entre_les_boîtes">Espaces entre les boîtes</h2>
+
+<p>La spécification pour l'alignement des boîtes inclut également les propriétés <code>gap</code>, <code>row-gap</code> et <code>column-gap</code>. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.</p>
+
+<p>La propriété <code>gap</code> est une propriété raccourcie pour <code>row-gap</code> et <code>column-gap</code> et qui permet de définir ces deux propriétés en une seule règle.</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie <code>gap</code> afin de définir un espace de <code>10px</code> entre chaque piste de ligne et un espace de <code>2em</code> entre chaque piste de colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p>
+
+<p>Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).</p>
+
+<h2 id="Pages_associées_à_chaque_propriété_d'alignement">Pages associées à chaque propriété d'alignement</h2>
+
+<p>Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">L'alignement des boîtes avec une disposition en colonne</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">L'alignement des boîtes pour les dispositions en bloc, les dispositions absolues et en tableau</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base de Flexbox</a></em></li>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexible</a></em></li>
+ <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></em></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>