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

dernière modification 24 juin 2024

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 :

<div class="conteneur_service>
    <div class="bouton_service">Titre1</div>
    <div class="bouton_service">Titre2</div>
    <div class="bouton_service">Titre3</div>
    <div class="bouton_service">Titre4</div>
</div>

Côté CSS :

.conteneur_service {
    display:flex;
    justify-content: space-around; /* aménage les espaces autour des blocs */
    flex-wrap: wrap;               /* ligne suivante pour afficher les blocs restants */
    margin-bottom: 18px;           /* espace au-dessous des blocs */
}
.bouton_service {
    width: 105px; height: 105px; 
    margin: 5px;                /* marges externes minimales autour du bouton */ 
    padding: 12px; 
    background-color:yellow;
    border: solid 1px black;
    font-size: 13.5px; 
    line-height: 25px;
    text-align: center;
    font-weight: bold;
}

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.

https://flexboxfroggy.com/#fr