Accueil > LES OUTILS > SPIP, la doc > Mise en pages > Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations

Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations

Comment afficher une suite de blocs d’informations de taille identique centrés quel que soit leur nombre.


Vous voulez afficher côte à côte des blocs de taille identique de façon harmonieuse et auto-adaptable ? Utiliser un conteneur avec la déclaration CSS3 "display : flex ;" (les contenus sont alors dits flexibles) est la meilleure solution : l’affichage des blocs se fait avec des marges gauches et droites identiques.
Ce procédé permet ainsi l’ adaptation à toutes les tailles d’écran (la "responsivité").

Côté HTML :

Côté CSS :

Nota :
En page Sommaire de notre site, les boutons cliquables vers les services proposés aux associations adhérentes du PIC sont des contenus flexibles.