Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Disposition du flux CSS
Le flux normal ou la disposition du flux (flow layout en anglais), est la façon dont les éléments de bloc et les éléments en ligne sont affichés sur une page avant que des modifications ne soient apportées à leur disposition. Le flux est essentiellement un ensemble d'éléments qui fonctionnent tous ensemble et se connaissent dans votre mise en page. Une fois qu'un élément est retiré du flux, il fonctionne de manière indépendante.
Dans le flux normal, les éléments en ligne s'affichent dans la direction en ligne, c'est-à-dire dans la direction dans laquelle les mots sont affichés dans une phrase selon le mode d'écriture du document. Les éléments de bloc s'affichent les uns après les autres, comme le font les paragraphes dans le mode d'écriture de ce document. En anglais, par conséquent, les éléments en ligne s'affichent les uns après les autres, en commençant par la gauche, et les éléments de bloc commencent en haut et descendent sur la page.
Exemple simple
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.
La première phrase contient également un élément <span> avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.
<div class="boite">
<p>
Une nuit de <span>novembre</span> de l'année 1782, selon l'histoire, deux
frères étaient assis près de leur feu d'hiver dans la petite ville française
d'Annonay, regardant les volutes de fumée grise s'élever de l'âtre et se
courber dans la large cheminée. Leurs noms étaient Stephen et Joseph
Montgolfier, ils étaient papetiers de métier, et étaient connus pour
posséder des esprits réfléchis et un profond intérêt pour toutes les
connaissances scientifiques et les nouvelles découvertes.
</p>
<p>
Avant cette nuit—une nuit mémorable, comme elle allait le prouver—des
centaines de millions de personnes avaient regardé les volutes de fumée
s'élever de leurs feux sans en tirer une inspiration particulière.
</p>
</div>
body {
font: 1.2em sans-serif;
}
p {
border: 2px solid green;
}
span {
background-color: lightblue;
}
Voir aussi
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.