files/fr/web/css/css_flow_layout/index.html


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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---
title: CSS Flow Layout
slug: Web/CSS/CSS_Flow_Layout
tags:
  - CSS
  - CSS Flow Layout
  - Reference
translation_of: Web/CSS/CSS_Flow_Layout
---
<div>{{CSSRef}}</div>

<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p>

<p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p>

<p>Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.</p>

<h2 id="Exemple_simple">Exemple simple</h2>

<p>Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.</p>

<p>La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.</p>

<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>

<h2 id="Guides">Guides</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans le flux normal</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement">La disposition en flux et les dépassements</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">La disposition en flux et les modes d'écriture</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors">Être ou non dans le flux</a></li>
</ul>

<h2 id="Référence">Référence</h2>

<h3 id="Termes_du_glossaire">Termes du glossaire</h3>

<ul>
 <li><a href="/fr/docs/Glossary/Block/Block_(CSS)">Bloc (CSS)</a></li>
</ul>