Pré-requis
- HTML et CSS de base
Niveau
- Débutant
Pour gérer la mise en page des différents éléments de ton site, plusieurs choix s'offrent à toi. Tu peux partir sur un système de colonnes et d'éléments de gabarits (template) tout faits comme tu peux en trouver dans Bootstrap ou autre librairie CSS; tu peux choisir une solution "maison" que tu aies basé toi-même sur des technologies CSS existantes comme les CSS Grids ou alors, faire preuve de créativité et utiliser des choses que j'ignore !
Des gens ont bossé dur sur ces thématiques et toutes les solutions, à mon sens, se valent dans la mesure où le résultat final sera le même. Les critères qui doivent aiguiller ton choix sont les suivants:
- la maintenabilité - il faut que tu puisses revenir dans 2 mois, te relire et modifier des choses
- l'adaptation responsive - il ne faut pas que ce soit une prise de tête
- le temps dont tu disposes - plus tu as de temps, plus tu as le droit de réfléchir à une solution sur-mesure
Si le contexte me le permet, je suis un gros gros utilisateur de flexbox, un système de positionnement disponible en CSS. C'est l'outil de mise en page, selon moi, par excellence. Je n'ai pas encore croisé de layout (mise en page) que je n'ai pas pu réaliser avec flexbox. Dans cet article je vais t'expliquer comment fonctionne ce système de positionnement et comment être efficace rapidement avec.
Première étape, étudier le positionnement
Flexbox, qui te permet de positionner tes éléments à ta guise, est un outil puissant qui fonctionne en te forçant à réfléchir à la relation entre un élément conteneur et ses éléments enfants. Je m’explique, prends ce schéma:
A- Conteneur et contenu
Dans ce schéma, j’ai un conteneur, le gros rectangle gris, qui possède 3 éléments enfants (à l’intérieur): le rose, l'orange et enfin le violet. Si je décris la manière dont les éléments sont positionnés dans le conteneur, j’aurais cette analyse:
- Les éléments sont positionnés en ligne dans le conteneur.
- De gauche à droite (dans l’axe horizontal) éléments sont positionnés au centre du conteneur et occupent le même espace
- De haut en bas (dans l’axe vertical), les éléments sont positionnés au centre du conteneur
Ces trois éléments sont les informations de bases essentielles à la mise en place d’un système de positionnement à l’aide de flexbox.
Seconde étape, coder la structure de la mise en page
Selon la première image, tu peux déjà dans ta tête imaginer le code HTML qui te permet de représenter ces éléments. On a un élément, contenant trois autres éléments donc :
B- Structure HTML
Pour accompagner ce HTML, j’ai ce code CSS qui ne fait que donner une taille et une couleur à mes éléments afin de les faire matcher avec le screenshot initial:
C - Code CSS
Ok on est bon. Si on check rapidement le rendu actuel on obtient:
D - Rendu HTML + CSS
Bon, ce n'est pas vraiment ce qu’on veut, mais de base voilà ce qu’il se passe ! On va appliquer ce que l’on a vu dans l’analyse de la première partie afin d’obtenir un résultat satisfaisant grâce à flexbox.
Troisième étape: coder le CSS du conteneur
Bon, j’ai mon code CSS de base ainsi que le code HTML l’accompagnant, mais toujours pas de flexbox en vue. Pour l’appliquer, on va se concentrer sur le conteneur. La première chose à faire, c’est dire à CSS que le conteneur gris utilise flexbox pour positionner les éléments à l’intérieur. Rien de plus simple ici :
E - Display flex
display: flex est la ligne CSS qui permet de mettre l’affichage du conteneur en mode flex. À partir de ce moment, les autres propriétés flex peuvent s’appliquer. À ce moment-là, selon le navigateur utilisé, le layout de la page devrait déjà avoir changé. Sur iPad Pro (Safari), j’ai ce résultat-là:
F - Application de la propriété flexbox
Les éléments enfants du conteneur sont désormais non plus en colonne, mais en ligne ! Le premier point (“Les éléments sont positionnés en ligne dans le conteneur.”) semble assuré. En réalité, pas vraiment. Selon les navigateurs, des valeurs par défaut s’appliquent sur les propriétés et donc d’un navigateur à un autre, le comportement de base de display: flex peut être totalement différent ! La propriété CSS à utiliser explicitement pour être SUR ET CERTAIN que les éléments du conteneur soient affichés en ligne est flex-direction :
G - Direction explicite
flex-direction est une propriété qui indique dans quelle direction se positionnent les éléments dans le conteneur. C’est hyper simple, soit les éléments sont positionnés en ligne (à l’horizontale) et donc la valeur de cette propriété est row, soit les éléments sont positionnés en colonne (à la verticale) et donc la valeur de cette propriété est column.
Le résultat graphique de cette propriété est maintenant sur tous les navigateurs comme sur l’image F.
flex-direction défini ce que je vais appeler dans la suite de l’article un axe principal. Cette notion est très importante pour la suite, car les propriétés que nous allons voir plus bas ont un comportement qui évolue selon l’axe principal. Dans mon exemple, l’axe principal est l’axe horizontal.
Bon, j’ai jusqu’ici quelque chose qui se rapproche du résultat attendu. Pour correspondre au deuxième critère, j’ai besoin d’espacer mes items entre eux et de centrer tout le groupe d’items dans le conteneur. En d’autres termes, je veux espacer équitablement mes items dans l’axe principal du conteneur ! Pour y parvenir, rien de plus simple: la propriété justify-content.
Elle permet de définir le positionnement des items dans l’axe horizontal en x valeurs:
-
flex-start→ positionnement en début d’axe principal, -
flex-end→ positionnement en fin d’axe principal, -
center→ positionnement au centre de l’axe principal, -
space-between→ ou le premier item se trouve en début d’axe principal, le dernier item en fin d’axe et ou l’espace restant est distribué entre les autres items, -
space-around→ positionnement où tout l’espace de l’axe est distribué équitablement entre les items.
Pour mon cas d’utilisation ici, la valeur la plus utile est space-around, qui donne ce résultat là:
H - Axe principal
C’est beaucoup mieux ! L’espace est distribué automatiquement et équitablement entre tous les items sans que le premier et le dernier item touchent les bords de mon conteneur.
La dernière chose à régler concerne l’axe secondaire, et dans mon exemple, l’axe vertical. Les éléments doivent être centrés sur cet axe d’après la troisième phrase de l’analyse. La propriété qui a le contrôle sur l'axe secondaire donc, se comporte comme justify-content, mais s’appelle align-items ! Cette propriété contrôle le positionnement des items dans le conteneur pour l’axe secondaire et utilise exactement les mêmes valeurs, donc sans surprises ici, on utilisera la valeur center:
I - Placement parfait
...ce qui donne le résultat:
J - Layout terminé
Voilà !
Il est intéréssant, pour capter toutes les subtilités du positionnement flexbox, de le tester dans un environnement sandbox et de voir ses possibilités. D’autres propriétés pour le conteneur ou les items existent et permettent d’aller encore plus loins dans les possibilités de positionnement et de taille... Je complèterais surement cet article avec une cheat-sheet qui récapitule toutes les propriétés et combinaisons possibles mais pour le moment je te laisse cette introduction !
Merci pour la lecture !
Code disponible sur: https://stackblitz.com/edit/article-flexbox?file=style.css
Credit photo de couverture : Omar Flores sur Unsplash
Top comments (0)