Dans ce tutoriel nous allons faire le point sur les différentes méthodes de placement des éléments et leur cas d'utilisation.
Float
L'utitilisation de float:left permet de retirer un élément du flux normal et ne sera aujourd'hui utilisé que pour placer un élément à gauche ou à droite avec les autres éléments "inline" qui se placent autour (image d'illustration dans un article par exemple).
Flex
Le display:flex permet de changer la disposition des éléments avec un positionnement en ligne ou en colonne. Les éléments enfants d'une Flexbox ont alors la responsabilité de définir leur largeur / hauteur via les propriétés width/height et via le flex-basis.
L'approche flexbox est donc utile pour changer la direction de placement des éléments (pour par exemple les placer les uns à côté des autres) sans forcément avoir de dimensions précises pour les enfants. On aura donc tendance à les utiliser dans les cas suivants :
- On veut aligner les élément verticalement ou horizontalement en insérant un espace avec la propriété
gap. - On a une grille qui n'est pas uniforme (structure des colonnes qui varient entre chaque ligne).
Grid
La grosse particularité du display: grid est le fait que l'élément parent a la responsabilité de définir la structure via un grid-template-columns ou grid-template-rows. Cela permet de ne pas avoir à ajouter de règles sur les éléments enfants.
Typiquement, comme son nom l'indique, ce type de positionnement est très adapté à une disposition en grille
On peut aussi facilement créer une structure responsive qui adapte le nombre d'élément en fonction de la largeur souhaité pour les éléments
On peut aussi utiliser ce type de disposition pour créer des structures de page rapidement gràce notamment au grid-area.
Cette approche permet de piloter facilement la structure depuis l'élément parent .layout en changeant le template via la propriété grid-template. Ce type de positionnement est donc intéréssant pour les cas suivante :
- On souhaite utiliser une grille simple
- On veut créer une structure qui peut être décomposer sous forme de colonnes (constantes entre chaque ligne).