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 :

<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.