Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 27 insertions, 27 deletions

diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html
index a151a1da09..17a2d6e00f 100644
--- a/files/fr/learn/css/css_layout/flexbox/index.html
+++ b/files/fr/learn/css/css_layout/flexbox/index.html
@@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 
 <div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div>
 
-<p class="summary">Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p>
+<p>Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
-   <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td>
+   <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td>
   </tr>
   <tr>
    <th scope="row">Objectif :</th>
@@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 
 <h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2>
 
-<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p>
+<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p>
 
 <p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p>
 
@@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 
 <p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p>
 
-<h2 id="Voici_un_exemple_simple"><span>Voici un exemple simple</span></h2>
+<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2>
 
 <p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p>
 
 <p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p>
 
-<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p>
+<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p>
 
 <h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2>
 
@@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 
 <p>Voici le résultat :</p>
 
-<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p>
+<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p>
 
 <p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez aussi définir une valeur <code>inline-flex</code> pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p>
+<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p>
 </div>
 
-<h2 id="Aparté_sur_le_modèle_flex"><span>Aparté sur le modèle flex</span></h2>
+<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2>
 
 <p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p>
 
-<p><img alt="Terminologie pour les boîtes modulables" class="default internal" src="https://mdn.mozillademos.org/files/16096/termes_flex.png" style="display: block; height: 333px; margin: 0px auto; width: 563px;"></p>
+<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p>
 
 <ul>
  <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li>
@@ -101,14 +101,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 <p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p>
+<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p>
 </div>
 
 <h2 id="Enveloppement">Enveloppement</h2>
 
 <p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p>
 
-<p><img alt="Débordement des éléments modulables" src="https://mdn.mozillademos.org/files/16098/Exemple_flexbox_2.png" style="display: block; height: 663px; margin: 0px auto; width: 933px;"></p>
+<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p>
 
 <p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p>
 
@@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
 
 <p>Essayons ; la disposition est bien meilleure avec cet ajout :</p>
 
-<p><img alt="Conditionnement des éléments modulables" src="https://mdn.mozillademos.org/files/16099/Exemple_flexbox_3.png" style="display: block; height: 918px; margin: 0px auto; width: 933px;">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p>
+<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p>
 
 <p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p>
 
@@ -165,7 +165,7 @@ article:nth-of-type(3) {
 
 <p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p>
 
-<p><img alt="Modulation de la largeur" src="https://mdn.mozillademos.org/files/16100/Exemple_flexbox_4.png" style="border-style: solid; border-width: 1px; display: block; height: 484px; margin: 0px auto; width: 1001px;"></p>
+<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p>
 
 <p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p>
 
@@ -185,7 +185,7 @@ article:nth-of-type(3) {
 
 <p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p>
 
-<p><img alt="Alignement" src="https://mdn.mozillademos.org/files/16101/Exemple_flexbox_5.png" style="display: block; height: 105px; margin: 0px auto; width: 960px;"></p>
+<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p>
 
 <p>D'abord, faites une copie locale de cet exemple.</p>
 
@@ -256,7 +256,7 @@ article:nth-of-type(3) {
 
 <p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p>
 
-<p><img alt="Imbrications avec flexbox" src="https://mdn.mozillademos.org/files/16102/Exemple_flexbox_6.png" style="border-style: solid; border-width: 1px; display: block; height: 559px; margin: 0px auto; width: 1003px;"></p>
+<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p>
 
 <p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :</p>
 
@@ -316,7 +316,7 @@ article:nth-of-type(3) {
 
 <p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p>
 
-<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p>
+<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
@@ -328,15 +328,15 @@ article:nth-of-type(3) {
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
 </ul>
 </div>