initial commit

11 files changed, 1949 insertions, 0 deletions

diff --git a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
new file mode 100644
index 0000000000..2321587479
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
@@ -0,0 +1,218 @@
+---
+title: Aligner des éléments dans un conteneur flexible
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible
+tags:
+  - CSS
+  - Flex
+  - Guide
+  - Web
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p>
+
+<p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p>
+
+<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p> </p>
+
+<p>Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Les_propriétés_responsables_de_l'alignement">Les propriétés responsables de l'alignement</h2>
+
+<p>Voici les propriétés que nous étudierons dans ce guide :</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.</li>
+ <li>{{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.</li>
+ <li>{{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.</li>
+ <li>{{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.</li>
+</ul>
+
+<p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p>
+</div>
+
+<h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2>
+
+<p>Les propriétés <code>align-items</code> et <code>align-self</code> permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.</p>
+
+<p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p>
+
+<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p>
+
+<p>Voici les valeurs disponibles pour aligner les objets :</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, la valeur d'<code>align-items</code> est <code>stretch</code>. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Aligner_un_objet_avec_align-self">Aligner un objet avec <code>align-self</code></h3>
+
+<p>La propriété <code>align-items</code> définit la valeur de la propriété <code>align-self</code> pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété <code>align-self</code> de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété <code>align-self</code> prend en charge les mêmes valeurs que <code>align-items</code> ainsi qu'un mot-clé <code>auto</code> qui reprendra la valeur définie sur le conteneur flexible.</p>
+
+<p>Dans le prochain exemple, le conteneur flexible a <code>align-items: flex-start</code>, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur <code>first-child</code> afin de cibler le premier élément fils pour lequel on indique <code>align-self: stretch</code> ; un autre élément a été sélectionné via la classe <code>selected</code> et est paramétré avec <code>align-self: </code><code>center</code>. Vous pouvez modifier la valeur de <code>align-items</code> ou changer les valeurs d'<code>align-self</code> sur les éléments afin d'observer le fonctionnement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Changer_d'axe_principal">Changer d'axe principal</h3>
+
+<p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p>
+
+<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p>
+
+<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_secondaire_align-content">Aligner le contenu sur l'axe secondaire : <code>align-content</code></h2>
+
+<p>Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété <code>align-content</code> afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">le groupement des lignes flexibles</a>.</p>
+
+<p>Afin qu'<code>align-content</code> puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.</p>
+
+<p>La propriété <code>align-content</code> prend les valeurs suivantes :</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (cette valeur n'est pas définie dans le module de spécification Flexbox)</li>
+</ul>
+
+<p>Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. <code>align-content</code> vaut <code>space-between</code> ce qui signifie que l'espace disponible sera réparti <em>entre</em> les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.</p>
+
+<p>Vous pouvez modifier la valeur de <code>align-content</code> afin d'observer comment cette propriété fonctionne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Là encore, on peut passer avec <code>flex-direction: column</code> afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong> : La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p>
+</div>
+
+<p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_principal">Aligner le contenu sur l'axe principal</h2>
+
+<p>Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : <code>justify-content</code>. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, <code>justify-content</code> on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.</p>
+
+<p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p>
+
+<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)</li>
+</ul>
+
+<p>Dans le prochain exemple, <code>justify-content</code> vaut <code>space-between</code>. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car <code>flex-direction</code> est paramétré avec la valeur <code>column</code>, <code>justify-content</code> distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p>
+
+<h3 id="L'alignement_et_les_modes_d'écriture">L'alignement et les modes d'écriture</h3>
+
+<p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la gauche" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la droite" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="L'alignement_et_la_propriété_flex-direction">L'alignement et la propriété <code>flex-direction</code></h2>
+
+<p>La ligne de début sera également modifiée si on change la valeur de la propriété <code>flex-direction</code>, par exemple en utilisant <code>row-reverse</code> à la place de <code>row</code>.</p>
+
+<p>Dans le prochain exemple, on utilise <code>flex-direction: row-reverse</code> et <code>justify-content: flex-end</code>. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de <code>flex-direction: row-reverse</code> à <code>flex-direction: row</code>. Vous verrez que les éléments sont désormais groupés à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2>
+
+<p>Il n'existe pas de propriété <code>justify-items</code> ou <code>justify-self</code> qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.</p>
+
+<p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p>
+
+<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p>
+
+<p>Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe <code>push</code> possède la déclaration <code>margin-left: auto</code>. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Les_prochaines_fonctionnalités_pour_l'alignement_et_les_boîtes_flexibles">Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles</h2>
+
+<p>Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur <code>space-evenly</code> pour les propriétés <code>align-content</code> et <code>justify-content</code>.</p>
+
+<p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p>
+
+<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">L'alignement des boîtes avec une grille CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
new file mode 100644
index 0000000000..f6baae1432
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
@@ -0,0 +1,187 @@
+---
+title: Utiliser les boîtes flexibles pour les applications web
+slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p>
+
+<ul>
+ <li>Centrer un élément au milieu d'une page</li>
+ <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li>
+ <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li>
+</ul>
+
+<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p>
+
+<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p>
+
+<ul>
+ <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li>
+ <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li>
+ <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li>
+</ul>
+
+<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p>
+
+<h2 id="Centrer_un_élément">Centrer un élément</h2>
+
+<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p>
+
+<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2>
+
+<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p>
+
+<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2>
+
+<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css;">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="HTML_3">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Élément 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 3&lt;/div&gt;
+&lt;/div&gt;
+&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;
+&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p>
+
+<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">Manipuler les boîtes flexibles</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
new file mode 100644
index 0000000000..26a4738980
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
@@ -0,0 +1,140 @@
+---
+title: Cas d'utilisation classiques de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox
+tags:
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p>
+
+<h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2>
+
+<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p>
+
+<p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p>
+
+<h2 id="La_navigation">La navigation</h2>
+
+<p>Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.</p>
+
+<p>Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.</p>
+
+<h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3>
+
+<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <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>, qui décrit comment aligner des objets sur l'axe principal.</p>
+
+<p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3>
+
+<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier <code>flex: auto</code> pour utiliser <code>flex: 1</code> qui correspond à la notation raccourcie de <code>flex: 1 1 0</code> et qui permet d'avoir la même largeur pour chaque élément, car la base (<code>flex-basis</code>) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="La_navigation_séparée">La navigation séparée</h2>
+
+<p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p>
+
+<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible#Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p>
+
+<p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Centrer_des_éléments">Centrer des éléments</h2>
+
+<p>Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.</p>
+
+<p>Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec <code>flex-start</code> ou à la fin avec <code>flex-end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété <code>align-items</code> sur l'élément parent ou bien on cible l'élément voulu avec <code>align-self</code>.</p>
+
+<h2 id="Une_disposition_en_cartes_avec_un_pied_ajustable">Une disposition en cartes avec un pied ajustable</h2>
+
+<p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p>
+
+<p><img alt="Deux composants &quot;carte&quot; montrant que l'élément contenant le texte ne s'étire pas." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Les_objets_média">Les objets média</h2>
+
+<p>Un objet média est un motif classique en <em>design</em> web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.</p>
+
+<p>On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.</p>
+
+<p>Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec <code>flex-start</code> puis on définit <code>.content</code> avec <code>flex: 1</code>. Comme vu dans l'exemple précédent, <code>flex: 1</code> signifie que cette partie de la carte peut grandir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.</p>
+
+<p>Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera <code>auto</code> comme valeur pour <code>flex-basis</code>. Toute largeur {{cssxref("width")}} ou <code>max-width</code> appliquée à l'image sera utilisée comme mesure pour <code>flex-basis</code>.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec <code>flex: 1</code>, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser <code>flex: auto</code> et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code>  <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Inverser_la_position_de_l'objet_média">Inverser la position de l'objet média</h3>
+
+<p>Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété <code>flex-direction</code> avec la valeur <code>row-reverse</code>. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe <code>flipped</code> (en plus de la classe existante <code>.media</code>). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Les_contrôles_de_formulaire">Les contrôles de formulaire</h2>
+
+<p>Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).</p>
+
+<p>Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <code>&lt;button&gt;</code> et l'élément <code>&lt;input&gt;</code> dans un conteneur auquel on ajoute une bordure et pour lequel on a <code>display: flex</code>. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <code>&lt;input&gt;</code> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.</p>
+
+<p>Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
new file mode 100644
index 0000000000..dadea30a48
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
@@ -0,0 +1,235 @@
+---
+title: Les concepts de base pour flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox
+tags:
+  - Beginner
+  - CSS
+  - Débutant
+  - Guide
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p>
+
+<p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p>
+
+<h2 id="Les_deux_axes_des_boîtes_flexibles">Les deux axes des boîtes flexibles</h2>
+
+<p>Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (<em>main axis</em> en anglais) et l'axe secondaire (<em>cross axis</em> en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.</p>
+
+<h3 id="L'axe_principal">L'axe principal</h3>
+
+<p>L'axe principal est défini par la propriété <code>flex-direction</code> qui peut prendre quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3>
+
+<p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p>
+
+<h2 id="Les_lignes_de_début_et_de_fin">Les lignes de début et de fin</h2>
+
+<p>Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.</p>
+
+<p>Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.</p>
+
+<p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p>
+
+<p>Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.</p>
+
+<h2 id="Le_conteneur_flexible">Le conteneur flexible</h2>
+
+<p>La zone d'un document sujette au modèle de disposition <em>flexbox</em> est appelée un <strong>conteneur flexible</strong>. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit <code>flex</code> ou <code>inline-flex</code>. Dès que c'est le cas, les éléments « enfants » directs deviennent des <strong>éléments flexibles (<em>flex items</em>)</strong>. Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :</p>
+
+<ul>
+ <li>Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété <code>flex-direction</code> est <code>row</code>).</li>
+ <li>Les éléments seront placés à partir de la ligne de début de l'axe principal.</li>
+ <li>Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.</li>
+ <li>Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.</li>
+ <li>La propriété {{cssxref("flex-basis")}} vaut <code>auto</code>.</li>
+ <li>La propriété {{cssxref("flex-wrap")}} vaut <code>nowrap</code>.</li>
+</ul>
+
+<p>Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.</p>
+
+<p>Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} </p>
+
+<h3 id="Modifier_flex-direction">Modifier <code>flex-direction</code></h3>
+
+<p>En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant <code>flex-direction: row-reverse</code>, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.</p>
+
+<p>Si on utilise <code>column</code> comme valeur de <code>flex-direction</code>, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise <code>column-reverse</code>, les lignes de début et de fin seront également inversées.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>flex-direction</code> avec la valeur <code>row-reverse</code>. Vous pouvez utiliser d'autres valeurs — <code>row</code>, <code>column</code> et <code>column-reverse</code> — afin de voir le résultat produit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Créer_un_conteneur_flexible_sur_plusieurs_lignes_avec_flex-wrap">Créer un conteneur flexible sur plusieurs lignes avec <code>flex-wrap</code></h2>
+
+<p>Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.</p>
+
+<p>Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec <code>flex-wrap</code> qui vaut <code>wrap</code>, les éléments passent à la ligne. Si on modifie la valeur avec <code>nowrap</code> (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise <code>nowrap</code> et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Pour approfondir ces notions, vous pouvez consulter l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a>.</p>
+
+<h2 id="La_propriété_raccourcie_flex-flow">La propriété raccourcie <code>flex-flow</code></h2>
+
+<p>Il est possible de synthétiser les propriétés <code>flex-direction</code> et <code>flex-wrap</code> avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour <code>flex-direction</code> et la seconde pour <code>flex-wrap</code>.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez changer les valeurs de <code>flex-direction</code> en utilisant <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code> pour la première et <code>wrap</code> ou <code>nowrap</code> pour la seconde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Les_propriétés_appliquées_aux_éléments_flexibles">Les propriétés appliquées aux éléments flexibles</h2>
+
+<p>Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Avant de revenir à ces propriétés, il nous faut définir le concept d'<strong>espace disponible</strong>. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.</p>
+
+<p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p>
+
+<h3 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h3>
+
+<p>La propriété <code>flex-basis</code> définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est <code>auto</code> — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour <code>flex-basis</code>.</p>
+
+<p>Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré <code>display: flex</code> sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).</p>
+
+<h3 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h3>
+
+<p>La propriété <code>flex-grow</code> est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de <code>flex-basis</code>. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.</p>
+
+<p>Si on utilise<code>flex-grow: 1</code> pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.</p>
+
+<p>La propriété <code>flex-grow</code> permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique <code>flex-grow</code> avec une valeur de 2 et, pour les autres éléments, <code>flex-grow</code> avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).</p>
+
+<h3 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h3>
+
+<p>La propriété <code>flex-grow</code> permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété <code>flex-shrink</code> permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que <code>flex-shrink</code> est un entier positif, l'élément peut alors devenir plus petit que la taille définie par <code>flex-basis</code>. De façon analogue à <code>flex-grow</code>, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de <code>flex-shrink</code> sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de <code>flex-shrink</code> plus faibles).</p>
+
+<p>La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que <code>flex-shrink</code> peut être moins cohérent que <code>flex-grow</code> selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> sont des proportions. Autrement dit, si tous les éléments ont <code>flex: 1 1 200px</code> et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait <code>flex: 2 1 200px</code> pour cet élément. Mais avoir <code>flex: 10 1 200px</code> d'une part et <code>flex: 20 1 200px</code> d'autre part fonctionnerait exactement de la même façon.</p>
+</div>
+
+<h3 id="La_propriété_raccourcie_flex_et_les_valeurs_synthétiques">La propriété raccourcie <code>flex</code> et les valeurs synthétiques</h3>
+
+<p>On voit rarement <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code> utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie <code>flex</code> permet de définir les valeurs de cette propriété dans cet ordre : <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>L'exemple suit vous permet de tester différentes valeurs pour <code>flex</code>. La première valeur est <code>flex-grow</code> et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est <code>flex-shrink</code> et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à <code>flex-basis</code> qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p>
+
+<p>Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;nombre-positif&gt;</code></li>
+</ul>
+
+<p>Avec <code>flex: initial</code>, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que <code>flex: 0 1 auto</code>. Ici, <code>flex-grow</code> vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille <code>flex-basis</code>. <code>flex-shrink</code> vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. <code>flex-basis</code> vaut <code>auto</code> et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.</p>
+
+<p>Avec <code>flex: auto</code>, on obtient le même comportement que <code>flex: 1 1 auto</code>, la seule différence avec <code>flex:initial</code> est que les éléments peuvent s'étirer si besoin.</p>
+
+<p>Avec <code>flex: none</code>, les éléments ne seront pas flexibles. Cette valeur est synonyme de <code>flex: 0 0 auto</code>. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec <code>flex-basis: auto</code>.</p>
+
+<p>On voit aussi souvent des valeurs comme <code>flex: 1</code> ou <code>flex: 2</code>, etc. Cela correspond à <code>flex: 1 1 0</code>. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.</p>
+
+<p>Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignement_justification_et_distribution_de_l'espace_disponible_entre_les_éléments">Alignement, justification et distribution de l'espace disponible entre les éléments</h2>
+
+<p>Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.</p>
+
+<p>La valeur initiale de cette propriété est <code>stretch</code>, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).</p>
+
+<p>On peut également utiliser la valeur <code>flex-start</code> afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur <code>flex-end</code> afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien <code>center</code> pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par <code>flex-direction</code>. La valeur initiale est <code>flex-start</code> qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur <code>flex-end</code> permet de les placer vers la fin et la valeur <code>center</code> permet de les centrer le long de l'axe principal.</p>
+
+<p>On peut également utiliser la valeur <code>space-between</code> afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur <code>space-around</code> (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur <code>space-evenly</code>.</p>
+
+<p>Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner des éléments dans un conteneur flexible</a>, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">comment cette spécification s'articule avec les autres modules CSS</a>.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
new file mode 100644
index 0000000000..a05bdb1ca2
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
@@ -0,0 +1,200 @@
+---
+title: Contrôler les proportions des boîtes flexibles le long de l'axe principal
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal
+tags:
+  - Boîtes flexibles
+  - CSS
+  - Flex
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p>
+
+<h2 id="Un_premier_aperçu">Un premier aperçu</h2>
+
+<p>Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :</p>
+
+<ul>
+ <li><code>flex-grow</code> : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?</li>
+ <li><code>flex-shrink</code> : quelle proportion de l'espace peut être retirée à cet élément ?</li>
+ <li><code>flex-basis</code> : quelle est la taille de l'élément avant tout agrandissement/réduction ?</li>
+</ul>
+
+<p>Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira <code>flex-grow</code> avec la valeur <code>2</code>, <code>flex-shrink</code> avec la valeur <code>1</code> et <code>flex-basis</code> avec la valeur <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}
+</pre>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p>
+
+<h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2>
+
+<p>Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille <em>naturelle</em> des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.</p>
+
+<h3 id="Le_dimensionnement_des_objets_flexibles">Le dimensionnement des objets flexibles</h3>
+
+<p>Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?</p>
+
+<p>CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque</a> et ces valeurs peuvent être utilisées comme <a href="/fr/docs/Web/CSS/length">unité de longueurs</a>.</p>
+
+<p>Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est <code>min-content</code>. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur <code>min-content</code> correspond à la taille du plus grand mot du paragraphe.</p>
+
+<p>Dans le second paragraphe, on utilise la valeur <code>max-content</code> et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p>
+
+<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p>
+
+<h3 id="Espace_libre_positif_et_négatif">Espace libre positif et négatif</h3>
+
+<p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p>
+
+<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p>
+
+<p><img alt="Les objets dépassent du conteneur." src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p>
+
+<p>Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur <code>row</code>, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser <code>flex-direction: column</code> (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).</p>
+
+<h2 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h2>
+
+<p>La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est <code>auto</code>. Si  <code>flex-basis</code> vaut <code>auto</code>, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour <code>flex-basis</code> (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour <code>flex-basis</code> pour cet élément).</p>
+
+<p>Si la taille initiale de l'élément n'est pas définie de façon absolue, <code>auto</code> correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de <code>min-</code> et <code>max-content</code>, car la boîte flexible utilisera <code>max-content</code> comme valeur pour <code>flex-basis</code>. Dans l'exemple suivant, nous verrons comment en tirer parti.</p>
+
+<p>Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur <code>0</code> pour <code>flex-grow</code> et <code>flex-shrink</code>. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une <code>flex-basis</code> de <code>150px</code> tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>En plus du mot-clé <code>auto</code>, on peut également utiliser le mot-clé <code>content</code> comme valeur pour <code>flex-basis</code>. Ainsi, <code>flex-basis</code> sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé <code>auto</code> et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.</p>
+
+<p>Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser <code>flex-basis</code> avec la valeur <code>0</code>. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons <code>flex-grow</code>.</p>
+
+<h2 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h2>
+
+<p>La propriété {{cssxref("flex-grow")}} définit <strong>le coefficient d'agrandissement flexible</strong>, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.</p>
+
+<p>Si tous les objets possèdent la même valeur pour le coefficient <code>flex-grow</code>, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur <code>1</code>. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur <code>88</code>, <code>100</code> ou <code>1.2</code> — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.</p>
+
+<h3 id="Combiner_flex-grow_et_flex-basis">Combiner <code>flex-grow</code> et <code>flex-basis</code></h3>
+
+<p>Les choses se compliquent lorsque <code>flex-grow</code> et <code>flex-basis</code> interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p>
+
+<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p>
+
+<p><img alt="L'espace positif est réparti entre les éléments." src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut <code>0</code> — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient <code>flex-grow</code>, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.</p>
+
+<p>Vous pouvez modifier le coefficient <code>flex-grow</code> pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Affecter_différents_coefficients_flex-grow_aux_éléments">Affecter différents coefficients <code>flex-grow</code> aux éléments</h3>
+
+<p>Notre compréhension du fonctionnement de <code>flex-grow</code> avec <code>flex-basis</code> nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients <code>flex-grow</code>. Si on conserve la valeur <code>0</code> pour <code>flex-basis</code> afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de <code>flex-grow</code> afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :</p>
+
+<ul>
+ <li><code>1</code> pour le premier élément</li>
+ <li><code>1</code> pour le deuxième élément</li>
+ <li><code>2</code> pour le troisième</li>
+</ul>
+
+<p>On utilise <code>flex-basis</code> avec la valeur <code>0</code> ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs <code>flex-grow</code> puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement <code>.25</code>, <code>.25</code> et <code>.50</code> — vous obtiendrez alors le même résultat.</p>
+
+<h2 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h2>
+
+<p>La propriété {{cssxref("flex-shrink")}} définit <strong>le coefficient de rétrécissement flexible</strong> qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.</p>
+
+<p>Cette propriété est utilisée lorsque le navigateur calcule les valeurs <code>flex-basis</code> des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que <code>flex-shrink</code> possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.</p>
+
+<p>Ainsi, si <code>flex-grow</code> gère la façon dont on peut ajouter de l'espace disponible, <code>flex-shrink</code> gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.</p>
+
+<p>Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si <code>flex-shrink</code> vaut <code>0</code>, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>En passant la valeur de <code>flex-shrink</code> à <code>1</code>, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.</p>
+
+<h3 id="Combiner_flex-shrink_et_flex-basis">Combiner <code>flex-shrink</code> et <code>flex-basis</code></h3>
+
+<p>On pourrait dire et penser que <code>flex-shrink</code> fonctionne de la même façon que <code>flex-grow</code>. Toutefois, deux arguments viennent contrecarrer cette analogie.</p>
+
+<p>Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre <code>flex-shrink</code> et l'espace libre négatif et celui de <code>flex-grow</code> avec l'espace libre positif :</p>
+
+<blockquote>
+<p>“Note : Le coefficient <code>flex-shrink</code> est multiplié par la taille de base (<code>flex-basis</code>) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”</p>
+</blockquote>
+
+<p>Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  <code>min-content</code> — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.</p>
+
+<p>On peut observer ce seuil avec <code>min-content</code> dans l'exemple qui suit où <code>flex-basis</code> est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que <code>min-content</code>. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.</p>
+
+<h3 id="Utiliser_différents_coefficients_flex-shrink_pour_différents_éléments">Utiliser différents coefficients <code>flex-shrink</code> pour différents éléments</h3>
+
+<p>Comme avec <code>flex-grow</code>, on peut utiliser différents coefficients <code>flex-shrink</code>. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).</p>
+
+<p>Dans l'exemple suivant, le premier objet possède un coefficient <code>flex-shrink</code> égal à 1, le deuxième a un coefficient égal à <code>0</code> (il ne rétrécira pas du tout) et le troisième est paramétré avec <code>4</code>. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec <code>flex-grow</code>, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Maîtriser_le_dimensionnement_des_objets_flexibles">Maîtriser le dimensionnement des objets flexibles</h2>
+
+<p>Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :</p>
+
+<h3 id="Quelle_est_la_taille_de_base_de_l'objet">Quelle est la taille de base de l'objet ?</h3>
+
+<ol>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> ou <code>content</code> (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément</li>
+ <li>Si <code>flex-basis</code> est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>0</code>, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.</li>
+</ol>
+
+<h3 id="De_l'espace_est-il_disponible">De l'espace est-il disponible ?</h3>
+
+<p>Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.</p>
+
+<ol>
+ <li>Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété <code>flex-grow</code> qui entrera en jeu.</li>
+ <li>Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété <code>flex-shrink</code> qui sera utilisée.</li>
+</ol>
+
+<h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3>
+
+<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p>
+
+<p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..46576643ce
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,114 @@
+---
+title: Disposition des boîtes flexibles CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - Aperçu
+  - CSS
+  - CSS Flexible Box Layout
+  - CSS Flexible Boxes
+  - Reference
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Le module de disposition des boîtes flexibles CSS</strong> (<em>CSS Flexible Box Layout</em>) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple qui suit, on utilise <code>display: flex</code> pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété <code>justify-content</code> a été paramétrée avec la valeur <code>space-between</code> afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (<em>cross axis</em>) car la valeur par défaut de la propriété <code>align-items </code>est <code>stretch</code>. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<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("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3>
+
+<p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("place-content")}}</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/Glossary/Flexbox">Flexbox / boîte flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Item">Objet flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base des boîtes flexibles</a></dt>
+ <dd>Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">Les liens entre <em>flexbox</em> et les autres méthodes de disposition</a></dt>
+ <dd>Comment <em>flexbox</em> s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement des éléments au sein d'un conteneur flexible</a></dt>
+ <dd>Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_éléments_flexibles">Ordonner les éléments flexibles</a></dt>
+ <dd>Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a></dt>
+ <dd>Cet article explique le fonctionnement des propriétés <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a></dt>
+ <dd>Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox">Les cas d'utilisation classiques des boîtes flexibles</a></dt>
+ <dd>Des <em>design patterns</em> pouvant être résolus avec les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox">La rétrocompatibilité de <em>flexbox</em></a></dt>
+ <dd>L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<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 Flexbox')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Flexbugs : une liste, maintenue par la communauté, des différents bugs des navigateurs relatifs aux boîtes flexibles et les éventuelles méthodes de contournements associées</a></li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Mixins">Mixins multi-navigateurs pour flexbox</a> : cet article fournit un ensemble de mixins pour obtenir l'effet des flexbox de façon homogène sur les différents navigateurs qui ne supportent pas la syntaxe moderne pour les boîtes flexibles</li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
new file mode 100644
index 0000000000..c6e9691ae5
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
@@ -0,0 +1,125 @@
+---
+title: Les liens entre flexbox et les autres méthodes de disposition
+slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions
+tags:
+  - CSS
+  - Guide
+  - display
+  - flexbox
+  - grid
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p>
+</div>
+
+<h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2>
+
+<p>La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.</p>
+
+<p>Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de <a href="https://www.w3.org/TR/css-align-3/">la spécification sur l'alignement des boîtes (<em>Box Alignment</em>)</a>. Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.</p>
+
+<p>Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de <em>flexbox</em> et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification <em>flexbox</em>, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :</p>
+
+<blockquote>
+<p>« Note : Bien que les propriétés d'alignement soient définies dans le module CSS <em>Box Alignment</em> <a href="https://www.w3.org/TR/css-align-3/">CSS-ALIGN-3</a>, le module <em>Flexible Box Layout</em> reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que <em>CSS Box Alignment Level 3</em> soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module <em>Box Alignment</em> s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module <em>Box Alignment</em>, lorsqu'il sera complet, remplacera les définitions énoncées ici. »</p>
+</blockquote>
+
+<p>Dans un prochain article de ce guide (<a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexibles</a>), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.</p>
+
+<h3 id="Les_propriétés_d'espacement_(gap)">Les propriétés d'espacement (<em>gap</em>)</h3>
+
+<p>Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées <code>grid-row-gap</code>, <code>grid-column-gap</code> et <code>grid-gap</code>. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés <code>gap</code>, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.</p>
+
+<h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p>
+
+<p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p>
+
+<h3 id="Les_différents_modes_d'écritures">Les différents modes d'écritures</h3>
+
+<p>La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
+
+<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p>
+
+<p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p>
+
+<h2 id="Les_boîtes_flexibles_et_les_autres_méthodes_de_disposition">Les boîtes flexibles et les autres méthodes de disposition</h2>
+
+<p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p>
+
+<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">les marges des conteneurs ne fusionneront pas</a>.</p>
+
+<p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p>
+
+<p>Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit <code>display: flex</code>. Si vous retirez <code>display: flex</code>, vous pouvez voir que l'élément <code>.box</code> s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant <code>display: flex</code>, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
+
+<h2 id="Les_boîtes_flexibles_et_la_disposition_en_grille">Les boîtes flexibles et la disposition en grille</h2>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">La disposition en grille (<em>CSS Grid</em>)</a> et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés <code>flex</code> qui auraient pu être affectées aux éléments enfants seront ignorées.</p>
+
+<p>Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.</p>
+
+<h3 id="Flexbox_grille_quelle_différence"><em>Flexbox</em> / grille : quelle différence ?</h3>
+
+<p>On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?</p>
+
+<p>La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
+
+<p>Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
+
+<p>Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.</p>
+
+<p>Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.</p>
+
+<p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p>
+
+<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p>
+
+<h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2>
+
+<p>La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :</p>
+
+<blockquote>
+<p>« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »</p>
+</blockquote>
+
+<p>La valeur de la propriété <code>display</code> contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.</p>
+
+<p>Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils <strong>directs</strong> du conteneur flexible.</p>
+
+<p>En ajoutant <code>display: contents</code> à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec <code>display: contents</code> afin que l'élément parent « revienne ».</p>
+
+<p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p>
+</div>
+
+<p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
+
+<p>La prise en charge de <code>display:contents</code> est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge <code>display: contents</code> et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
new file mode 100644
index 0000000000..6b78cba48f
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
@@ -0,0 +1,101 @@
+---
+title: Maîtriser le passage à la ligne des éléments flexibles
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles
+tags:
+  - CSS
+  - Grille
+  - Guide
+  - Intermediate
+  - flexbox
+  - grid
+  - wrapping
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p>
+
+<h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2>
+
+<p>La valeur initiale de la propriété {{cssxref("flex-wrap")}} est <code>nowrap</code>. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété <code>flex-wrap</code> avec la valeur <code>wrap</code>, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs <code>row wrap</code> ou <code>column wrap</code>.</p>
+
+<p>Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels <code>flex-basis</code> vaut <code>160px</code> et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Le_retour_à_la_ligne_et_flex-direction">Le retour à la ligne et <code>flex-direction</code></h2>
+
+<p>Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule <code>flex-direction</code>. Si <code>flex-direction</code> vaut <code>row-reverse</code>, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.</p>
+
+<h2 id="Des_explications_sur_cette_disposition_unidimensionnelle">Des explications sur cette disposition unidimensionnelle</h2>
+
+<p>Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.</p>
+
+<p>Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.</p>
+
+<p>Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.</p>
+
+<h2 id="Comment_fonctionnent_les_systèmes_de_grilles_basés_sur_les_boîtes_flexibles">Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?</h2>
+
+<p>La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (<em>floats</em>). Si on affecte des largeurs en pourcentage aux éléments flexibles (via <code>flex-basis</code> ou avec une largeur sur l'élément et avec <code>flex-basis</code> en <code>auto</code>) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.</p>
+
+<p>Dans cet exemple, on a <code>flex-grow</code> et <code>flex-shrink</code> qui valent <code>0</code> afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.</p>
+
+<h2 id="Créer_des_gouttières_entre_les_éléments">Créer des gouttières entre les éléments</h2>
+
+<p>Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour <a href="https://www.w3.org/TR/css-align-3/">le module d'alignement des boîtes</a> et pour Flexbox. À l'avenir, nous pourrons utiliser <code>row-gap</code> et <code>column-gap</code> pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.</p>
+
+<p>On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.</p>
+
+<p>Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="L'impact_de_visibility_collapse">L'impact de <code>visibility: collapse</code></h2>
+
+<p>La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique <code>visibility: collapse</code> (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :</p>
+
+<blockquote>
+<p>“Indiquer <code>visibility:collapse</code> sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de <code>visibility:collapse</code> sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Éléments repliés</a></p>
+</blockquote>
+
+<p>Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.</p>
+
+<p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.</p>
+
+<p>Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.</p>
+
+<p>Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.</p>
+
+<h3 id="La_différence_entre_visibility_collapse_et_display_none">La différence entre <code>visibility: collapse</code> et <code>display: none</code></h3>
+
+<p>Lorsqu'on utilise <code>display: none</code> sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. <code>visibility: hidden</code> permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
new file mode 100644
index 0000000000..652541e0c1
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
@@ -0,0 +1,369 @@
+---
+title: Mises en page avancées avec les boîtes flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+tags:
+  - CSS
+  - Reference
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p>
+
+<p>Dans ces <em>mixins</em>, on utilisera :</p>
+
+<ul>
+ <li>Des <em>fallbacks</em> avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de <code>flex</code>)</li>
+ <li>La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)</li>
+</ul>
+
+<p>Ces <em>mixins</em> ont été inspirés par : <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></p>
+
+<p>Et les articles suivants ont été d'une aide précieuse :</p>
+
+<ul>
+ <li><a href="https://w3.org/tr/css3-flexbox/">https://w3.org/tr/css3-flexbox/</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
+ <li><a href="https://css-tricks.com/using-flexbox/">https://css-tricks.com/using-flexbox/</a></li>
+ <li><a href="https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
+ <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Un guide complet sur Flexbox | CSS-Tricks</a></li>
+ <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Un guide visuel pour les flexbox CSS3 : Flexbox Playground</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.</p>
+</div>
+
+<h3 id="Les_conteneurs_flexibles">Les conteneurs flexibles</h3>
+
+<p>En utilisant la valeur <code>flex</code> pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur <code>inline-flex</code> permet quant à elle de générer un conteneur flexible en ligne (<em>inline</em>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex</code> | <code>inline-flex</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }</pre>
+</div>
+
+<div class="highlight">
+<pre class="brush: css">@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }</pre>
+</div>
+
+<h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3>
+
+<p>La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.</p>
+
+<ul>
+ <li>Valeurs possibles : <code>row</code> (la valeur par défaut)| <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
+</div>
+
+<h3 id="flex-wrap"><code>flex-wrap</code></h3>
+
+<p>La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).</p>
+
+<ul>
+ <li>Valeurs possibles : <code>nowrap</code> (la valeur par défaut)| <code>wrap</code> | <code>wrap-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}</pre>
+</div>
+
+<h3 id="flex-flow"><code>flex-flow</code></h3>
+
+<p>La propriété {{cssxref("flex-flow")}} est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> pour définir <code>flex-direction</code> et <code>flex-wrap</code> qui permettent respectivement de définir l'axe principal et l'axe secondaire.</p>
+
+<ul>
+ <li>Valeur par défaut : <code>row</code> (la valeur par défaut)| <code>nowrap</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}</pre>
+</div>
+
+<h3 id="order"><code>order</code></h3>
+
+<p>La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (0 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}</pre>
+</div>
+
+<h3 id="flex-grow"><code>flex-grow</code></h3>
+
+<p>La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}</pre>
+</div>
+
+<h3 id="flex-shrink"><code>flex-shrink</code></h3>
+
+<p>La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}</pre>
+</div>
+
+<h3 id="flex-basis"><code>flex-basis</code></h3>
+
+<p>La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li>Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est <code>auto</code>.</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}</pre>
+</div>
+
+<h3 id="flex"><code>flex</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (<code>flex-grow</code>), le facteur de réduction (<code>flex-shrink</code>) et la longueur de base (<code>flex-basis</code>). Lorsqu'un élément est un élément flexible, c'est <code>flex</code> qui sera utilisée (plutôt que <code>width</code> ou <code>height</code>) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, <code>flex</code> n'aura aucun effet.</p>
+
+<ul>
+ <li>Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}</pre>
+</div>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de la forme <code>space-*</code> ne sont pas prises en charge avec les anciennes syntaxes.</p>
+</div>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> (la valeur par défaut)| <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
+</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour <code>justify-content</code> mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. <code>align-self</code> permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, <code>align-self</code> correspondra toujours à <code>align-items</code>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}</pre>
+</div>
+
+<h3 id="align-self"><code>align-self</code></h3>
+
+<ul>
+ <li>Valeurs : <code>auto</code> (la valeur par défaut)| <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}</pre>
+</div>
+
+<h3 id="align-content"><code>align-content</code></h3>
+
+<p>La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}</pre>
+</div>
diff --git a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
new file mode 100644
index 0000000000..acd32e0de0
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
@@ -0,0 +1,139 @@
+---
+title: Ordonner les éléments flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles
+tags:
+  - Accessibilité
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - a11y
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p>
+
+<h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2>
+
+<p>La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>column</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p>
+
+<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p>
+
+<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et  <code>row-reverse</code> au côté gauche.</p>
+
+<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p>
+
+<blockquote>
+<p>“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordre et Orientation</a></p>
+</blockquote>
+
+<p>Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.</p>
+
+<p>Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :</p>
+
+<blockquote>
+<p>“Les auteurs ne doivent pas utiliser <code>order</code> ou les valeurs <em>-reverse</em> de <code>flex-flow</code>/<code>flex-direction</code> comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.<em>” </em></p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note </strong>: Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p>
+</div>
+
+<p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p>De la même façon, changer la valeur de <code>flex-direction</code> ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.</p>
+
+<h2 id="La_propriété_order">La propriété <code>order</code></h2>
+
+<p>En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.</p>
+
+<p>La propriété <code>order</code> permet de disposer les éléments au sein de <em>groupes ordinaux</em>. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.</p>
+
+<p>Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs <code>order</code> comme suit :</p>
+
+<ul>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Quatrième élément selon la source :<code>order: 3</code></li>
+ <li>Cinquième élément selon la source :<code>order: 1</code></li>
+</ul>
+
+<p>Les éléments seront affichés sur la page dans l'ordre suivant :</p>
+
+<ul>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Cinquième élément selon la source : <code>order: 1</code></li>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Quatrième élément selon la source : <code>order: 3</code></li>
+</ul>
+
+<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>Par défaut, la valeur de la propriété <code>order</code> est <code>0</code> pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour <code>order</code>.</p>
+
+<p>On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre <code>-1</code> au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.</p>
+
+<p>Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe <code>active</code> dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>Les éléments sont affichés dans ce que la spécification intitule <em>un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"</em>). La valeur de la propriété <code>order</code> est prise en compte avant que les éléments soient affichés.</p>
+
+<p>L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels <code>order</code> est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.</p>
+
+<h2 id="La_propriété_order_et_l'accessibilité">La propriété <code>order</code> et l'accessibilité</h2>
+
+<p>La propriété <code>order</code> aura exactement les mêmes conséquences qu'une modification de <code>flex-direction</code> sur l'accessibilité. Utiliser <code>order</code> modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.</p>
+
+<p>En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li>
+ <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li>
+</ul>
+
+<h2 id="Cas_d'utilisation_pour_order">Cas d'utilisation pour <code>order</code></h2>
+
+<p>Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété <code>order</code> à bon escient permet d'implémenter certains motifs récurrents.</p>
+
+<p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p>
+
+<p><img alt="Un composant avec une date, un titre puis un contenu." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p>
+
+<p>Dans cet exemple, la carte sera le conteneur flexible et <code>flex-direction</code> aura la valeur <code>column</code>. Pour la date, on affectera un ordre avec la propriété <code>order</code> qui vaut <code>-1</code> qui permettra de la placer au-dessus du titre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p>Ces légères adaptations sont caractéristiques des cas où la propriété <code>order</code> se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. <code>order</code> peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
new file mode 100644
index 0000000000..b36e1eb0f4
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
@@ -0,0 +1,121 @@
+---
+title: Rétrocompatibilité de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox
+tags:
+  - '@supports'
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p>
+
+<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2>
+
+<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p>
+
+<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p>
+
+<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p>
+
+<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p>
+
+<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p>
+
+<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2>
+
+<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p>
+
+<ul>
+ <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li>
+ <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li>
+</ul>
+
+<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p>
+
+<h2 id="Problèmes_fréquents">Problèmes fréquents</h2>
+
+<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p>
+
+<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p>
+
+<h2 id="Techniques_de_recours">Techniques de recours</h2>
+
+<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p>
+
+<h3 id="Éléments_flottants">Éléments flottants</h3>
+
+<blockquote>
+<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p>
+</blockquote>
+
+<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p>
+
+<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block"><code>display: inline-block</code></h3>
+
+<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p>
+
+<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-"><code>display: table-</code><em> </em></h3>
+
+<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p>
+
+<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p>
+
+<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p>
+
+<blockquote>
+<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3>
+
+<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2>
+
+<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code utilisé pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p>