Intégrer une maquette sur la grille avec Flex
Vous allez apprendre à utiliser la technologie Flex pour intégrer une maquette dessiner sur une grille.
En effet pour faciliter l’intégration côté développement, le graphiste conçoit l’interface graphique en disposant les blocs de contenu sur cette grille de disposition contenant 12 colonnes et des gouttières (espaces entre les colonnes).
Le site 960 grid systeme illustre bien cette approche :
Il existe bien-sur des Frameworks, comme Bootstrap, qui vous permettent de réaliser, plus simplement, une mise en page sur la grille mais vous allez apprendre à le gérer entièrement avec le code CSS.
Travailler avec des classes CSS
Lorsqu’une caractéristique graphique (bloc de 3 colonnes, par exemple) est vouée à être utiliser plusieurs fois sur des éléments HTML différents, il faut employer les classes CSS.
L’exemple ci-dessous fait référence à un bloc occupant 50% (6 colonnes / 12) la largeur de la grille.
Code HTML
<div class="col-6"> <!-- contenu html --> </div>
Code CSS
.col-6{ /* pour un bloc de 50%*/
/* instructions CSS */
}
Exemple concret:
Utiliser Flex pour l’alignement des colonnes
Nous voila dans le vif du sujet : comme aligner les blocs de contenu parfaitement sur la grille en tenant compte des gouttières?
Nous allons reproduire avec le CSS3 la disposition des blocs suivant :
La structure HTML est la suivante
<div class="container">
<header></header>
<section class="row">
<div class="col-4"><h2>Produit 1</h2></div>
<div class="col-4"><h2>Produit 2</h2></div>
<div class="col-4"><h2>Produit 3</h2></div>
</section>
</div>
Nous présentons rapidement les différents blocs :
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: orange;
height: 90px;
margin: 16px 0;
}
h2{
background-color: silver;
border: 1px solid grey;
}
Résultat en image :
Nous allons maintenant aligner les blocs en utilisant le mode d’affichage display:flex sur l’élément parent. Cela signifie que les blocs enfants pourront être disposés de manière flexible.
.row{
display: flex;
}
Ne pas oublier d’appliquer le reset d’Eric Meyer afin de nettoyer le CSS du navigateur.
Le résultat en image donne ceci :
Nous allons maintenant spécifier la taille de chaque bloc col-4. Comme 4 colonnes représente 1/3 de 12, nous définissons une taille de 33.33% pour chaque colonne avec la syntaxe flex-basis.
.col-4{
flex-basis: 33.33%;
box-sizing: border-box;
}
Résultat en image :
Nous avons ajouter le code box-sizing: border-box; pour ne pas ajouter la taille de la bordure au bloc. En effet, sans ce code, la taille du bloc serait augmentée de 2px : 1px pour la bordure de gauche et 1px pour celle de droite.
Le résultat ne correspond pas encore au rendu final. Nous allons maintenant gérer les gouttières.
Intégrer les gouttières de la grille
La gouttière est l’espace qui sépare les colonnes. Pour créer cette séparation, on applique la propriété padding de 15px à gauche et à droite de chaque bloc col-4.
.col-4{
flex-basis: 33.33%;
box-sizing: border-box;
/* gouttière */
padding-left: 15px;
padding-right: 15px;
}
Les contenus sont donc ramenés vers l’intérieur du bloc et sont séparés de 15 + 15 = 30 pixels (équivaut à la gouttière de la maquette).
Aperçu :
Il faut cependant ramener vers la gauche le premier bloc et vers la droite le dernier.
Pour cela nous allons tirer de -15px (valeur négative) vers la gauche et vers la droite le bloc parent c’est à dire le bloc .row.avec la propriété margin.
Code CSS :
.row{
display: flex;
/* gouttière rectifiée */
margin-left: -15px;
margin-right: -15px;
}
Voici le résultat :
Pour aérer le contenu texte dans chaque titre, on va ajouter une marge interne de 8px.
h2{
background-color: silver;
border: 1px solid grey;
/* contenu aéré */
padding: 8px;
}
Et voici le résultat définitif qui correspond à la maquette dessinée :
Le code CSS complet :
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: orange;
height: 90px;
margin: 16px 0;
}
h2{
background-color: silver;
border: 1px solid grey;
padding: 8px;
}
.row{
display: flex;
margin-left: -15px;
margin-right: -15px;
}
.col-4{
flex-basis: 33.33%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
Testez sur Codepen.
Diversifier les classes
Vous pouvez bien-sur prévoir d’autres classes pour les autres largeurs de bloc , comme par exemple:
-
.col-6pour une colonne de 50% -
.col-12pour une colonne de 100% -
.col-3pour une colonne de 25% -
.col-8pour une colonne de 66.66%
Dans ce cas pensez à organiser votre code autrement. Rassembler avec un sélecteur multiple les propriétés communes aux différentes classes puis spécifier la taille de chaque colonne, comme dans l’exemple ci-dessous :
.row{
display: flex;
margin-left: -15px;
margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
.col-3{
flex-basis: 25%;
}
.col-4{
flex-basis: 33.33%;
}
.col-6{
flex-basis: 50%;
}
.col-8{
flex-basis: 66.66%;
}
.col-12{
flex-basis: 100%;
}
Il vous suffit ensuite, avec le même fichier CSS, de changer le nom des classes aux blocs HTML pour une mise en page différente sur la même grille de 12 colonnes, comme avec le code ci-dessous :
<div class="container">
<header></header>
<section class="row">
<div class="col-3"><h2>Produit 1</h2></div>
<div class="col-3"><h2>Produit 2</h2></div>
<div class="col-6"><h2>Produit 3</h2></div>
</section>
</div>
Résultat en image :
Testez sur Codepen.
Disposition des colonnes sur plusieurs lignes
Nous allons voir comment disposer les colonnes sur plusieurs lignes pour intégrer la maquette ci-dessous :
Il suffit d’abord en HTML de rajouter trois autres blocs :
<div class="container">
<header></header>
<section class="row">
<div class="col-4"><h2>Produit 1</h2></div>
<div class="col-4"><h2>Produit 2</h2></div>
<div class="col-4"><h2>Produit 3</h2></div>
<div class="col-4"><h2>Produit 4</h2></div>
<div class="col-4"><h2>Produit 5</h2></div>
<div class="col-4"><h2>Produit 6</h2></div>
</section>
</div>
Vous remarquez cependant que les six blocs se répartissent la largeur du conteneur. Chaque bloc a donc rétréci :
En effet la propriété flex-basis signifie ‘taille de base’ et non pas ‘taille obligatoire’. Avec la technologie flexible, les blocs peut s’agrandir mais aussi … se rétrécir, si besoin, comme c’est le cas ici!
Il faut donc interdire le rétrécissement avec la propriété flex-shrink sur chaque colonne.
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: orange;
height: 90px;
margin: 16px 0;
}
h2{
background-color: silver;
border: 1px solid grey;
padding: 8px;
}
.row{
display: flex;
margin-left: -15px;
margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
flex-basis: 33.33%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
/* pas de rétrécissement */
flex-shrink: 0;
}
.col-3{
flex-basis: 25%;
}
.col-4{
flex-basis: 33.33%;
}
.col-6{
flex-basis: 50%;
}
.col-8{
flex-basis: 66.66%;
}
.col-12{
flex-basis: 100%;
}
Cette fois-ci les tailles sont conservées mais nous remarquons que toutes les colonnes restent sur la même ligne :
Nous allons fournir l’instruction flex-wrap pour autoriser les blocs à retourner à la ligne. Il faut appliquer la propriété flex-wrap: wrap; sur le bloc parent .row.
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: orange;
height: 90px;
margin: 16px 0;
}
h2{
background-color: silver;
border: 1px solid grey;
padding: 8px;
}
.row{
display: flex;
margin-left: -15px;
margin-right: -15px;
/* autoriser le retour à la ligne */
flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
flex-basis: 33.33%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
flex-shrink: 0;
}
.col-3{
flex-basis: 25%;
}
.col-4{
flex-basis: 33.33%;
}
.col-6{
flex-basis: 50%;
}
.col-8{
flex-basis: 66.66%;
}
.col-12{
flex-basis: 100%;
}
Voici le résultat :
Il suffit de rajouter un margin-bottom de 30px sur chaque colonne pour créer la gouttière horizontale :
.col-3, .col-4, .col-6, .col-8, .col-12{
flex-basis: 33.33%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
flex-shrink: 0;
/* gouttière horizontale */
margin-bottom: 30px;
}
Voici l’aperçu final :
Le code CSS complet :
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: orange;
height: 90px;
margin: 16px 0;
}
h2{
background-color: silver;
border: 1px solid grey;
padding: 8px;
}
.row{
display: flex;
margin-left: -15px;
margin-right: -15px;
flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
flex-basis: 33.33%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
flex-shrink: 0;
margin-bottom: 30px;
}
.col-3{
flex-basis: 25%;
}
.col-4{
flex-basis: 33.33%;
}
.col-6{
flex-basis: 50%;
}
.col-8{
flex-basis: 66.66%;
}
.col-12{
flex-basis: 100%;
}
Testez sur Codepen.
