convert content to md

1 files changed, 93 insertions, 110 deletions

diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md
index 02b2574984..b19cf1ca40 100644
--- a/files/fr/web/css/align-self/index.md
+++ b/files/fr/web/css/align-self/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/align-self
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>align-self</code></strong> permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.</p>
+La propriété CSS **`align-self`** permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.
 
-<p>Si l'un des objet a une marge automatique (<code>auto</code>) pour l'axe perpendiculaire à l'axe principal, <code>align-self</code> sera ignoré. Lorsque le conteneur est une grille, <code>align-self</code> permet d'aligner l'élément au sein de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a>. Si le conteneur est une boîte flexible, l'alignement se fait selon <a href="/fr/docs/Glossaire/Axe_transversal">l'axe secondaire</a>.</p>
+Si l'un des objet a une marge automatique (`auto`) pour l'axe perpendiculaire à l'axe principal, `align-self` sera ignoré. Lorsque le conteneur est une grille, `align-self` permet d'aligner l'élément au sein de [la zone de grille](/fr/docs/Glossaire/Zones_de_grille). Si le conteneur est une boîte flexible, l'alignement se fait selon [l'axe secondaire](/fr/docs/Glossaire/Axe_transversal).
 
-<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div>
+{{EmbedInteractiveExample("pages/css/align-self.html")}}
 
-<p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p>
+Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 align-self: auto;
 align-self: normal;
 
@@ -47,53 +48,52 @@ align-self: unsafe center;
 /* Valeurs globales */
 align-self: inherit;
 align-self: initial;
-align-self: unset;</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.</dd>
- <dt><code>normal</code></dt>
- <dd>L'effet de ce mot-clé dépend du mode de disposition utilisé :
- <ul>
-  <li>Pour une disposition absolue, ce mot-clé est synonyme de <code>start</code> pour les boîtes remplacées positionnées de façon absolue, il est synonyme de <em>stretch</em> pour les autres boîtes positionnées de façon absolue.</li>
-  <li>Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de <code>stretch</code>, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme <code>start</code>.</li>
-  <li>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</li>
- </ul>
- </dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.</dd>
- <dt><code>center</code></dt>
- <dd>La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Indique l'alignement par rapport à la ligne de base.<br>
- Si besoin, la valeur <code>first baseline</code> est remplacée par <code>start</code> et <code>last baseline</code> est remplacée par <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.</dd>
- <dt><code>safe</code></dt>
- <dd>Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+align-self: unset;
+```
+
+### Valeurs
+
+- `auto`
+  - : La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.
+- `normal`
+
+  - : L'effet de ce mot-clé dépend du mode de disposition utilisé :
+
+    - Pour une disposition absolue, ce mot-clé est synonyme de `start` pour les boîtes remplacées positionnées de façon absolue, il est synonyme de _stretch_ pour les autres boîtes positionnées de façon absolue.
+    - Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de `stretch`.
+    - Pour les éléments flexibles, ce mot-clé est synonyme de `stretch`.
+    - Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de `stretch`, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme `start`.
+    - Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
+
+- `self-start`
+  - : Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
+- `self-end`
+  - : Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
+- `flex-start`
+  - : Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
+- `flex-end`
+  - : Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
+- `center`
+  - : La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
+- `baseline first baseline`
+  `last baseline`
+  - : Indique l'alignement par rapport à la ligne de base.
+    Si besoin, la valeur `first baseline` est remplacée par `start` et `last baseline` est remplacée par `end`.
+- `stretch`
+  - : Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
+- `safe`
+  - : Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur `start` avait été utilisée.
+- `unsafe`
+  - : Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.flex-container {
+```css
+.flex-container {
   height: 250px;
   display: flex;
 }
@@ -121,63 +121,46 @@ align-self: unset;</pre>
   -webkit-align-self: stretch;
   align-self: stretch;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="flex-container"&gt;
-  &lt;p class="element-flex center"&gt;Milieu&lt;/p&gt;
-  &lt;p class="element-flex baseline"&gt;Base&lt;/p&gt;
-  &lt;p class="element-flex stretch"&gt;Étiré&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
-
-<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 Box Alignment", "#propdef-align-self", "align-self")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td>
-   <td>{{Spec2("CSS3 Flexbox")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_boîtes_flexibles_(Flexbox)">Prise en charge pour les dispositions avec les boîtes flexibles (<em>Flexbox</em>)</h3>
-
-<p>{{Compat("css.properties.align-self.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
-
-<p>{{Compat("css.properties.align-self.grid_context")}}</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">Utiliser les boîtes flexibles CSS</a></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>La propriété {{cssxref("align-items")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<div class="flex-container">
+  <p class="element-flex center">Milieu</p>
+  <p class="element-flex baseline">Base</p>
+  <p class="element-flex stretch">Étiré</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","300")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} |                      |
+| {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}         | {{Spec2("CSS3 Flexbox")}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions avec les boîtes flexibles (_Flexbox_)
+
+{{Compat("css.properties.align-self.flex_context")}}
+
+### Prise en charge pour les dispositions avec les grilles CSS
+
+{{Compat("css.properties.align-self.grid_context")}}
+
+## Voir aussi
+
+- [Utiliser les boîtes flexibles CSS](/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS)
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- La propriété {{cssxref("align-items")}}