Fiche N°17 : Affichage adaptatif d’une suite centrée de blocs d’informations
par
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.