Dans cette section, nous allons plonger au cœur de Flexbox, un outil puissant et essentiel pour tout concepteur web souhaitant créer des mises en page fluides et réactives.
Flexbox, ou le Flexible Box Layout Module, apporte flexibilité et simplicité dans la gestion des espaces et des alignements.
Qu’est-ce que Flexbox ?
Flexbox est un modèle de mise en page unidimensionnelle qui nous permet de distribuer l’espace entre les éléments d’une interface de manière efficace, même lorsque leurs tailles sont inconnues ou dynamiques.
Contrairement aux anciennes méthodes de mise en page, qui reposaient sur des flottants (floats) et des positionnements (positions), Flexbox nous offre une approche plus intuitive et moins contraignante.
Les principaux avantages de Flexbox incluent :
- Flexibilité : Les éléments peuvent s’agrandir pour remplir l’espace disponible ou se rétrécir pour s’adapter à des espaces plus petits.
- Alignement facile : L’alignement vertical et horizontal des éléments devient trivial, résolvant un problème historique de la mise en page CSS.
- Gestion simplifiée de l’espacement : L’espacement entre les éléments peut être ajusté de manière uniforme sans recourir à des calculs compliqués ou à des éléments factices.
- Mise en page directionnelle : Flexbox permet de définir facilement la direction dans laquelle les éléments doivent s’organiser (en ligne ou en colonne), offrant une grande souplesse dans la conception des layouts.
Pourquoi utiliser Flexbox ?
L’utilisation de Flexbox est particulièrement avantageuse lorsqu’il s’agit de faire des mises en page complexes, comme les grilles fluides, les barres latérales, les barres de navigation, les pieds de page qui doivent s’adapter à différentes tailles d’écran, etc… Avec Flexbox, ces éléments peuvent maintenir une apparence cohérente et ordonnée, quelles que soient les dimensions de l’affichage.
Flexbox simplifie également la création de mises en page responsives, rendant les sites web plus accessibles sur une variété d’appareils. Flexbox permet de se passer de « bidouille » pour créer des expériences utilisateur supérieures sans se soucier des limitations techniques.
Les Bases de Flexbox
Flexbox est une technique de mise en page qui peut sembler intimidante au premier abord, mais une fois que vous avez saisi les principes de base, elle devient un outil incroyablement puissant et flexible pour la conception web. Commençons par explorer comment configurer un conteneur Flex, puis nous verrons comment contrôler la disposition des éléments à l’intérieur de ce conteneur.
Configurer un Conteneur Flex
La première étape pour utiliser Flexbox est de définir un conteneur flex. Cela transforme l’élément et tous ses enfants directs en une mise en page flex.
Exemple :
<div style="display: flex;">
<!-- Les éléments enfants iront ici -->
</div>
En définissant display: flex; sur un élément, vous activez le contexte Flex pour cet élément et tous ses enfants directs.
Axe Principal et Axe Transversal
Lorsque vous travaillez avec Flexbox, il est crucial de comprendre deux concepts clés : l’axe principal (main axis) et l’axe transversal (cross axis). L’axe principal est la direction principale dans laquelle les éléments enfants sont alignés. L’axe transversal est perpendiculaire à l’axe principal.
- Axe principal : Par défaut, il s’étend horizontalement de gauche à droite (
row). - Axe transversal : Par défaut, il s’étend verticalement de haut en bas.
Direction de Flex
La propriété flex-direction vous permet de définir la direction de l’axe principal, influençant ainsi la disposition des éléments enfants.
Exemples :
row(défaut) : Les enfants sont disposés horizontalement de gauche à droite.column: Les enfants sont disposés verticalement de haut en bas.
<div style="display: flex; flex-direction: row;">
<!-- Les éléments s'alignent horizontalement -->
</div>
<div style="display: flex; flex-direction: column;">
<!-- Les éléments s'alignent verticalement -->
</div>
Il y a également une autre propriété qui permet d’inverser l’ordre d’affichage, l’attribut « reverse » :
<div style="display: flex; flex-direction: row-reverse;">
<!-- Les éléments s'alignent horizontalement -->
</div>
<div style="display: flex; flex-direction: column-reverse;">
<!-- Les éléments s'alignent verticalement -->
</div>
Alignement des Éléments
Avec Flexbox, l’alignement des éléments devient intuitif et flexible grâce à justify-content et align-items.
Justify-content
justify-content contrôle l’alignement des éléments le long de l’axe principal. Il permet de gérer l’espacement entre et autour des éléments enfants.
Exemples :
flex-start: Les éléments sont alignés au début de l’axe principal.flex-end: Les éléments sont alignés à la fin de l’axe principal.center: Les éléments sont centrés le long de l’axe principal.space-between: Les éléments sont répartis uniformément, le premier élément est au début, le dernier à la fin.space-around: Les éléments sont répartis avec un espace égal autour d’eux.
<div style="display: flex; justify-content: center;">
<!-- Les éléments sont centrés horizontalement -->
</div>
Align-items
align-items contrôle l’alignement des éléments le long de l’axe transversal, ce qui est particulièrement utile pour l’alignement vertical.
Exemples :
flex-start: Les éléments sont alignés au début de l’axe transversal.flex-end: Les éléments sont alignés à la fin de l’axe transversal.center: Les éléments sont centrés le long de l’axe transversal.baseline: Les éléments sont alignés selon la ligne de base du texte.stretch(défaut) : Les éléments sont étirés pour remplir le conteneur (si aucune hauteur n’est définie).
<div style="display: flex; align-items: center;">
<!-- Les éléments sont centrés verticalement -->
</div>
En combinant display: flex;, flex-direction, justify-content, et align-items, vous avez le contrôle total sur la disposition et l’alignement des éléments dans votre mise en page Flexbox.
Cela rend la création de mises en page complexes beaucoup plus simple et plus intuitive.
Exercice : manipuler des éléments Flexbox
Maintenant que vous avez cerné l’essentiel, je vous propose de faire un petit jeu qui consiste à apprendre les différents placements de Flexbox, en utilisant l’application Flexbox Froggy => https://flexboxfroggy.com/#fr
Ressources complémentaires
Vous pouvez également retrouver des slides basés sur une autre approche de l’apprentissage de Flexbox ici (accessible avec votre compte ISD Flaubert) -> https://docs.google.com/presentation/d/1WxiQ7F5SzmC-EarJsFwUL8nTtltzEjZ7QizQUwcL5-8/edit?usp=sharing
Ces slides sont un résumé de la page « CSS Tricks » qui explique très bien comment fonctionne Flexbox -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/