path: root/files/fr/learn/css/css_layout/flexbox/index.html

---
title: Flexbox
slug: Learn/CSS/CSS_layout/Flexbox
tags:
  - Apprentissage
  - Article
  - Boîtes modulables
  - CSS
  - Codage
  - Disposition
  - Débutant
  - Guide
  - Mise en page avec les CSS
  - Mises en page
  - flexbox
translation_of: Learn/CSS/CSS_layout/Flexbox
original_slug: Apprendre/CSS/CSS_layout/Flexbox
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div>

<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="standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <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>
   <td>Apprendre à utiliser le système Flexbox pour créer des mises en page web.</td>
  </tr>
 </tbody>
</table>

<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="/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>

<ul>
 <li>centrer verticalement un bloc de contenu dans son parent ;</li>
 <li>faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;</li>
 <li>faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.</li>
</ul>

<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">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="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>

<p>Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur <code>flex</code> à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :</p>

<pre class="brush: css">section {
  display: flex;
}</pre>

<p>Voici le résultat :</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>
</div>

<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" 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>
 <li>L'<strong>axe croisé </strong><strong> </strong>est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début<strong> (cross start)</strong> et la fin (<strong>cross end</strong>) de l'axe croisé.</li>
 <li>L'élément parent dont la propriété est <code>display: flex</code>  ({{htmlelement("section")}} dans notre exemple) est appelé le <strong>conteneur flex</strong> (<strong>flex container</strong>).</li>
 <li>Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés <strong>éléments flex (flex items) </strong>(les éléments {{htmlelement("article")}}} dans notre exemple).</li>
</ul>

<p>Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.</p>

<h2 id="Colonnes_ou_lignes">Colonnes ou lignes ?</h2>

<p>Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à <code>row</code> : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).</p>

<p>Ajoutons la déclaration suivante dans la règle :</p>

<pre class="brush: css">flex-direction: column;</pre>

<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>
</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="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>

<pre class="brush: css">flex-wrap: wrap;</pre>

<p>Essayons ; la disposition est bien meilleure avec cet ajout :</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>

<h2 id="Forme_abrégée_«_flex-flow_»">Forme abrégée « flex-flow »</h2>

<p>Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer</p>

<pre class="brush: css">flex-direction: row;
flex-wrap: wrap;</pre>

<p>par</p>

<pre class="brush: css">flex-flow: row wrap;</pre>

<h2 id="Taille_modulable_des_éléments_flex">Taille modulable des éléments flex</h2>

<p>Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> ou prenez une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> comme nouveau point de départ (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">voir en direct</a>).</p>

<p>Ajoutez d'abord la règle ci-dessous en fin de la CSS :</p>

<pre class="brush: css">article {
  flex: 1;
}</pre>

<p>Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.</p>

<p>Maintenant ajoutons cette règle en-dessous de la précédente :</p>

<pre class="brush: css">article:nth-of-type(3) {
  flex: 2;
}</pre>

<p>Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.</p>

<p>Vous pouvez également définir une valeur minimale de taille dans la valeur <code>flex</code>. Modifiez comme suit vos règles <code>article</code> existantes :</p>

<pre class="brush: css">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}</pre>

<p>En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : <em>quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.</em></p>

<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="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>

<h2 id="Flex_forme_abrégée_vs_forme_longue">Flex : forme abrégée vs forme longue</h2>

<p>{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :</p>

<ul>
 <li>une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;</li>
 <li>une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;</li>
 <li>une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.</li>
</ul>

<p>Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.</p>

<h2 id="Alignement_horizontal_et_vertical">Alignement horizontal et vertical</h2>

<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="Exemple_flexbox_5.png"></p>

<p>D'abord, faites une copie locale de cet exemple.</p>

<p>Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :</p>

<pre class="brush: css">div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}</pre>

<p>Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.</p>

<p>{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).</p>

<ul>
 <li>Par défaut, la valeur est <code>stretch</code>, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.</li>
 <li>Avec la valeur <code>center</code>, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.</li>
 <li>Il y a également des valeurs comme <code>flex-start</code> et <code>flex-end</code> qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.</li>
</ul>

<p>Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:</p>

<pre class="brush: css">button:first-child {
  align-self: flex-end;
}</pre>

<p>Voyez l'effet obtenu, puis supprimez ensuite la règle.</p>

<p>{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.</p>

<ul>
 <li>La valeur par défaut est <code>flex-start</code>. Tous les éléments sont disposés vers l'origine de l'axe principal.</li>
 <li>Vous utiliserez  <code>flex-end</code> pour les disposer vers la fin.</li>
 <li><code>center</code> est aussi une valeur possible pour <code>justify-content</code>. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.</li>
 <li>La valeur <code>space-around</code>, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.</li>
 <li>Une autre valeur, <code>space-between</code>, est semblable à <code>space-around</code> mais elle ne laisse pas d'espace aux extrémités.</li>
</ul>

<p>N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.</p>

<h2 id="Ordonner_les_éléments_flex">Ordonner les éléments flex</h2>

<p>Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.</p>

<p>Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :</p>

<pre class="brush: css">button:first-child {
  order: 1;
}</pre>

<p>Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :</p>

<ul>
 <li>par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;</li>
 <li>les éléments flex avec des valeurs <code>order</code> plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;</li>
 <li>les éléments flex avec les mêmes valeurs pour <code>order</code> sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs <code>order</code> de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.</li>
 <li>Le troisième élément suit le deuxième, car il a la même valeur pour <code>order</code> et qu'il est placé après dans le code source.</li>
</ul>

<p>Vous pouvez donner des valeurs négatives à <code>order</code> pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :</p>

<pre class="brush: css">button:last-child {
  order: -1;
}</pre>

<h2 id="Boîtes_flex_imbriquées">Boîtes flex imbriquées</h2>

<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="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>

<pre>section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button</pre>

<p>Regardez le code utilisé pour cette disposition.</p>

<p>Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.</p>

<pre class="brush: css">section {
  display: flex;
}</pre>

<p>Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.</p>

<pre class="brush: css">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
</pre>

<p>Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur <code>flex:1 100px;</code> pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.</p>

<pre class="brush: css">article:nth-of-type(3) div:first-child {
  flex:1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}</pre>

<p>Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.</p>

<pre class="brush: css">button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}</pre>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).</p>

<p>Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.</p>

<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="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p>

<h2 id="Résumé">Résumé</h2>

<p>Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.</p>

<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div>

<div>
<h2 id="Dans_ce_module">Dans ce module</h2>

<ul>
 <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>