Le layout par défaut en CSS que personne connaît !

Le flow layout c'est un peu le "layout de base", c'est sûrement pour ça que tu n'en as jamais entendu parler.

Si tu fais un document avec uniquement du HTML sans CSS : tu as du flow layout.

<h1>Hello les amis !</h1>
<p>Je suis en flow layout ?</p>
<p>Ah oui... c'est bien ça. Il n'y a même pas de CSS 😂</p>

Voici un exemple de code qui est dans un flow layout.

Type d'élément

Dans ce type de layout, il y a 2 types d'éléments :

• block element : les éléments comme les titres, les paragraphes, les div et tous les éléments du style
• inline element : qui représente tous les liens, les span ou bold, c'est généralement des petits bouts de texte

Tous les éléments ont des types par défaut, tu penses que tu arrives à en deviner ?

Les deux types sont différents sur un point majeur, leur direction.

Excalidraw

Le type block va aller verticalement tandis que le type inline va aller horizontalement.

De ce fait, les inline elements sont beaucoup moins permissifs.

• Un élément inline n'accepte pas les propriétés width / height

Par défaut, un élément inline va prendre uniquement la place minimum requise pour exister.

Contrairement aux éléments block qui non seulement acceptent toutes les propriétés mais vont faire l'exact opposé !

<style>
h1 {
  border: 2px dashed dodgerblue;
  padding: 4px;}
a {
  border: 2px dashed goldenrod;
  padding: 4px;
}
</style>

<h1>Mon titre (block)</h1>
<a href="#">Mon lien</a>

Tu peux voir que les éléments de type block :

• prennent toute la place horizontale disponible
• prennent la place minimum verticale

Pour que l'élément "réduise" à sa place minimum horizontale, tu peux utiliser width: min-content !

Spécificités du inline

L'algorithme de inline a quelques spécificités que je dois te mettre en avant.

1) Extra space vertical

<style>
  div {
    border: 2px dashed dodgerblue;
  }
</style>

<div>
  <img src="https://i.imgur.com/2Zrl8e4.png" width="300" height="300" />
</div>

Tu peux voir qu'en bas de l'image, on a une sorte de "extra padding"

Un petit extra padding en bas de chaque élément inline

Comme le inline est pour le texte, le navigateur ajoute un petit espace en bas de celui-ci. Pour le supprimer, tu as deux solutions :

1. Mettre l'image en display: block sur l'image
2. Ajouter la propriété line-height: 0 sur la div

2) Extra space horizontal

De la même manière, quand on met les images à côté des autres, on se retrouve avec ça :

<img 
src="https://i.imgur.com/2Zrl8e4.png" 
width="100" 
height="100" 
/>
<img 
src="https://i.imgur.com/2Zrl8e4.png" 
width="100" 
height="100" 
/>
<img 
src="https://i.imgur.com/2Zrl8e4.png" 
width="100" 
height="100" 
/>

C'est à cause des espaces qu'on ne voit pas qui sont entre les éléments. Si tu "supprimes" l'espace entre chaque /> <img, tu verras qu'il n'y a plus d'espacement étrange.

3) Inline element "wrap"

Les éléments inline par défaut vont faire un retour à la ligne quand ils sont trop grands :

<style>
div {
  max-width: 220px;
}
</style>

<div>
<p>
  Je suis un texte <b>très heureux car il fait beau !</b>
</p>
</div>

Tu peux le voir juste ici :

Le bold fait un retour à la ligne

Si tu veux annuler ce comportement, tu peux utiliser display: inline-block 😉

En conclusion

Le Flow Layout est le layout appliqué par défaut, il possède deux types d'éléments :

• Block : comme footer ou header
• Inline : comme a ou span

Il est possible de changer le type d'un élément en CSS en utilisant display: inline ou display: block.

Le Flow Layout a quelques particularités comme on l'a vu.

Celui-ci est pratique quand on veut juste afficher du texte, par exemple le texte affiché dans cet article de blog utilise le Flow Layout :

Screen du CSS de cet article de blog

Si tu veux en savoir plus, je t'invite à t'inscrire à mon cours sur NexTailwind qui contient tout ce que tu dois connaître sur TailwindCSS et le CSS :