Le layout par défaut en CSS que personne connaît ! 24/09/2024 • Melvynx
Loading...
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 styleinline 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.
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 : 2 px dashed dodgerblue ;
padding : 4 px ; }
a {
border : 2 px dashed goldenrod ;
padding : 4 px ;
}
</ 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 !
Ajoute width: min-content sur le h1
Spécificités du inline L'algorithme de inline a quelques spécificités que je dois te mettre en avant.
< style >
div {
border : 2 px 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 :
Mettre l'image en display: block sur l'image
Ajouter la propriété line-height: 0 sur la div
Résous le problème avec une des deux solutions proposées
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 : 220 px ;
}
</ 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 :
