Revenir
Revenir

La création de sites qui s'adaptent aux différentes tailles d'écran

Un site webresponsive, également appelé site web adaptatif, est un site conçu pour offrir une expérience...

Sommaire

Adapter les sites à tous les écransQu'est-ce qu'un site web responsive ?Qu'est-ce que Flexbox ?
Découvrir les principes de base de FlexboxLe conteneur FlexboxLa direction des élémentsLe retour à la ligne des éléments
Aligner des éléments à sa convenanceAligner les éléments sur l'axe principalAligner les éléments sur l'axe secondaireRégler la taille des éléments

Adapter les sites à tous les écrans

Qu'est-ce qu'un site web responsive ?

Un site webresponsive, également appelé site web adaptatif, est un site conçu pour offrir une expérience utilisateur optimale sur différents appareils et résolutions d'écran. L'idée principale derrière un site responsive est de permettre au contenu du site de s'adapter de manière fluide et automatique à la taille de l'écran sur lequel il est consulté, que ce soit un ordinateur de bureau, une tablette ou un smartphone.
Le principe fondamental d'un site responsive réside dans l'utilisation de techniques de conception web flexibles, notamment des feuilles de style en cascade (CSS) et desmedia queries. Lesmedia queriespermettent au site de détecter les caractéristiques de l'appareil utilisé, telles que la largeur de l'écran, et d'appliquer des règles CSS spécifiques en fonction de ces caractéristiques.

Qu'est-ce que Flexbox ?

Flexbox, également connu sous le nom de CSS Flexible Box Layout, est un module CSS qui permet de créer des mises en page flexibles et réactives. Il offre un moyen efficace de distribuer, aligner et organiser les éléments d'une interface utilisateur, en particulier dans le contexte d'un conteneur parent.
Le principe de base de Flexbox repose sur la création d'un conteneur flexible (flex container) qui contient un ou plusieurs éléments enfants (flex items). Les éléments enfants peuvent être disposés horizontalement ou verticalement, en fonction des besoins de la conception.
Flexbox est largement utilisé dans la conception et le développement web pour créer des mises en page responsives et adaptatives. Il offre une alternative puissante et flexible aux méthodes traditionnelles de mise en page en utilisant des flottants et des positionnements absolus.

Découvrir les principes de base de Flexbox

Le conteneur Flexbox

Le principe de la mise en page avec Flexbox est très simple : on définit un conteneur à l’intérieur duquel on place plusieurs éléments. Une page web peut accueillir plusieurs conteneurs.
Le conteneur est une balise HTML basée par exemple sur l'élémentdiv, et les éléments sont d’autres balises HTML de typedivplacées à l’intérieur.
Pour activer Flexbox, vous devez appliquer la propriété CSSdisplay: flexà l'élément conteneur.

La direction des éléments

Flexbox utilise deux axes pour disposer les éléments. L'axe principal (main axis) peut être horizontal ou vertical, selon la direction souhaitée. L'axe transversal (cross axis) est perpendiculaire à l'axe principal.
La propriétéflex-directionpermet de spécifier la direction de l'axe principal. Elle peut prendre les valeurs suivantes :
  • row :Les éléments sont disposés horizontalement de gauche à droite.
  • column :Les éléments sont disposés verticalement de haut en bas.
  • row-reverse :Les éléments sont disposés horizontalement de droite à gauche.
  • column-reverse :Les éléments sont disposés verticalement de bas en haut.
Remarque : par défaut avecflex, les éléments sont alignés horizontalement ; il n’est donc pas nécessaire de préciser dans le fichier style.css l’instructionflex-direction : row.

Le retour à la ligne des éléments

Par défaut, les blocs essaient de rester sur la même ligne même s'ils n'ont pas la place (ce qui peut provoquer des bugs d’affichage en raison du resserrement des éléments). Pour remédier à cela, on peut par exemple demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la place avecflex-wrap  qui peut prendre ces valeurs :
  • nowrap: pas de retour à la ligne (par défaut) ;
  • wrap: les éléments vont à la ligne lorsqu'il n'y a plus la place ;
  • wrap-reverse: les éléments vont à la ligne en sens inverse lorsqu'il n'y a plus la place.

Aligner des éléments à sa convenance

Aligner les éléments sur l'axe principal

Pour changer l’alignement des éléments, on utilise l’instructionjustify-contentqui peut prendre les valeurs suivantes :
  • flex-start: alignés au début (par défaut) ;
  • flex-end: alignés à la fin ;
  • center: alignés au centre ;
  • space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;
  • space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités.

Aligner les éléments sur l'axe secondaire

Si les éléments sont placés selon une direction horizontale (ligne), l’axe secondaire est vertical et réciproquement. L’instructionalign-itemsqui peut prendre les valeurs ci-dessous permet de modifier l’alignement des éléments selon un axe secondaire :
  • stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
  • flex-start: alignés au début ;
  • flex-end: alignés à la fin ;
  • center: alignés au centre ;
  • baseline: alignés sur la ligne de base (semblable à flex-start).

Régler la taille des éléments