blob: 377b162194acf14512e17bffe00da6698872ea8c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
---
title: Mode de mise en page
slug: Web/CSS/Mode_de_mise_en_page
tags:
- CSS
- Reference
translation_of: Web/CSS/Layout_mode
---
<div>{{CSSRef}}</div>
<p>Un <strong>mode de disposition CSS</strong> (<em>layout mode</em>), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :</p>
<ul>
<li><em><a href="/fr/docs/Web/CSS/CSS_Flow_Layout">Le flux normal (</a></em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">normal flow</a><em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">)</a></em> : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.</li>
<li><a href="/fr/docs/Web/CSS/CSS_Table"><em>La disposition en tableau (</em>Table layout<em>)</em></a> : cette disposition est conçue pour organiser des tableaux.</li>
<li><em>La disposition flottante (</em>Float layout<em>)</em> : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.</li>
<li><a href="/fr/docs/Web/CSS/CSS_Positioning"><em>La disposition positionnée (</em>Positioned layout<em>)</em></a> : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.</li>
<li><a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>La disposition en colonnes (</em>Multi-column layout<em>)</em></a> : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.</li>
<li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox"><em>La disposition avec les boîtes flexibles (flexbox) (</em>flexible box layout<em>)</em></a> : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.</li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout"><em>La disposition en grille (</em>Grid layout<em>)</em></a> : cette disposition permet d'organiser les éléments relativement à une grille fixe.</li>
</ul>
<div class="note">
<p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Reference">Les propriétés CSS</a> ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.</p>
</div>
|
