Flux

Le flux natif de la page HTML

Le flot (ou flux ou "flow" en anglais) en HTML/CSS est la manière naturelle dont les éléments d'une page web s'organisent et se positionnent les uns par rapport aux autres lorsqu'ils sont affichés dans le navigateur. Comprendre ce concept est essentiel pour concevoir des mises en page claires et harmonieuses.

Le flot (ou flux, "flow" en anglais) en HTML/CSS est la manière naturelle dont les éléments d'une page web s'organisent et se positionnent les uns par rapport aux autres lorsqu'ils sont affichés dans le navigateur. Comprendre ce concept est essentiel pour concevoir des mises en page claires et harmonieuses.

1. Le flot normal (normal flow)

Par défaut, tous les éléments HTML suivent un flot normal, ce qui signifie qu'ils s'alignent de manière automatique en fonction de leur type :

a) Éléments en ligne (inline)

Les éléments comme <span>, <a>, <strong>, ou <em> s'alignent horizontalement, côte à côte, jusqu'à ce qu'ils atteignent la fin de la ligne.
S'il n'y a plus d'espace sur la ligne, ils passent automatiquement à la ligne suivante (retour à la ligne).
Ils occupent uniquement la largeur nécessaire à leur contenu.

Exemple :

<p>Bonjour <strong>monde</strong> !</p>

Le texte "Bonjour monde !" sera sur une seule ligne, sauf si la largeur de la fenêtre est trop petite.

b) Éléments de bloc (block)

Les éléments comme <div>, <p>, <h1> et <ul> s'alignent verticalement.
Chaque élément de bloc commence sur une nouvelle ligne et occupe toute la largeur disponible (par défaut).
Les blocs poussent ceux qui suivent vers le bas.

Exemple :

"Bloc 1" sera au-dessus de "Bloc 2", chaque bloc occupant toute la largeur.

2.Le rôle des marges et du box model

Les marges (margins), les bordures (borders), et les paddings (espaces internes) influencent également le flot. Par exemple :

Les marges peuvent créer des espaces entre les blocs ou les éléments en ligne.
Cela peut provoquer un "effet de flottement", où deux blocs semblent se repousser.

3. Interruption du flot normal

CSS permet de sortir des règles du flot normal pour créer des mises en page plus complexes.

a) Flotter (float)

Avec la propriété float, un élément peut être "sorti" du flot normal et placé à gauche ou à droite, avec le texte ou d'autres éléments s'enroulant autour.
Exemple typique : afficher une image à gauche avec du texte à droite.

<img src="image.jpg" style="float: left; margin-right: 10px;"> <p>Texte à côté de l'image.</p>

b) Positionnement (position)

La propriété position permet de placer des éléments à des emplacements précis. Par exemple, avec absolute, un élément est positionné indépendamment du flot normal.

c) Flexbox et Grid

Flexbox (display: flex;) et Grid (display: grid;) sont des outils modernes pour organiser les éléments en dehors du flot normal tout en conservant un contrôle précis sur leur disposition.

4. Quand faut-il travailler avec le flot ?

Le flot naturel est pratique pour les pages simples et les documents linéaires (comme des articles de blog). Pour des mises en page plus complexes, comme un site web avec une barre latérale ou un pied de page, on modifie ce flot avec des propriétés comme float, flexbox ou grid.

Être ou ne pas être dans le flux

Lire cet article à propos du flux natif de la page Être ou ne pas être dans le flux Cette session, nous allons apprendre les propriétés CSS du concept Flexbox. Résumé visuel

Inline : Les éléments se suivent horizontalement.
Block : Les éléments se placent verticalement.
Vous pouvez perturber ce flot pour créer des dispositions spécifiques.

Article MDN à propos du flux Veuillez faire les 2 premiers exercices de la page suivante et non les 4.