Alignement vertical des modules Divi en CSS

23 Nov 2017

Bonjour tout le monde,

Aujourd’hui je voudrais vous parler de la disposition verticale des modules dans une colonne Divi. Qui n’a jamais eu besoin de centrer verticalement les modules dans ses lignes ? D’aligner un élément sur le bas de la colonne adjacente ? N’aimeriez-vous pas que Divi puisse répartir automatiquement les modules sur toute la hauteur d’une section ?

La solution existe, et elle est belle et simplissime : les « boîtes flexibles » CSS, plus communément appelées « flexbox ». A une époque assez peu compatible avec certains navigateurs, la flexbox est aujourd’hui très bien supportée (il faut cependant encore utiliser les préfixes).

Comportement de Divi par défaut

Par défaut, les lignes et les colonnes Divi ne sont pas (des boites) « flex », ce qui implique que :

  • la hauteur de chaque colonne est égale à la hauteur de tous ses modules empilés (avec leurs marges),
  • on ne peut modifier facilement la disposition des modules que grâce à leurs marges, à leur position, ou au padding de la colonne.

Or, tout ceci est assez limitant car tous les réglages autorisés sont manuels, et de plus la hauteur d’une colonne n’est pas forcément la même que celles des autres, donc les alignements précis sont quasi impossible à réaliser.

Divi flirte avec la flexbox…

Heureusement pour nous, la boîte magique est là !

Connaissez-vous le réglage de Divi permettant d’ « harmoniser les hauteurs des colonnes » dans une ligne ? Vous l’avez peut-être déjà utilisé pour aligner le bord inférieur des colonnes possédant un fond non transparent, ou une bordure (les cas classiques).

Harmoniser la hauteur des colonnes de Divi

En fait cette option convertit simplement la ligne en flexbox, soit en CSS :

.et_pb_row.et_pb_equal_columns {
  display: flex;
  direction: ltr;
}

Ou, avec les préfixes :

.et_pb_row.et_pb_equal_columns {
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 direction: ltr;
}

Le réglage par défaut d’un conteneur flexbox (ici, notre ligne) impose en effet à ses éléments (nos colonnes) devenus flex (mais pas box) de s’étirer jusqu’à son bord inférieur, qui est déterminé par l’élément le plus haut, c’est-à-dire notre colonne la plus haute.

Ce réglage, ou le CSS associé ci-dessus, est la fondation de tout ce qui va suivre, car avec des colonnes de même taille, on va pouvoir tout aligner proprement.

… mais ce n’est pas suffisant !

Malheureusement, les options de Divi ne nous emmèneront pas plus loin. La flexbox, par contre, OUI.

Utilisation de la flexbox

Tout d’abord, il faut savoir que :

  • l’on peut agir sur les éléments d’une flexbox selon les deux directions : horizontale et verticale ;
  • la flexbox possède une direction principale et une secondaire (la perpendiculaire) ;
  • la direction principale par défaut est l’horizontale, de gauche à droite, et la secondaire, verticale de haut en bas ;
  • la propriété flex-direction permet de définir la direction principale d’une flexbox.

Ensuite, pour contrôler la disposition dans une flexbox, nous avons deux propriétés flex CSS ultra simples :

  • justify-content, qui permet d’arranger les éléments dans la direction principale de la flexbox ;
  • align-items, qui permet d’aligner les éléments dans la direction perpendiculaire.

Applications de la flexbox aux colonnes de Divi

Nous avons transformé la ligne en flexbox, ce qui nous a permis d’égaliser les hauteurs des colonnes. Maintenant, c’est chaque colonne qui va devenir une flexbox à son tour, afin de gérer la disposition verticale des modules. Pour ce faire, on va positionner une classe CSS spécifique pour chaque colonne que l’on souhaite altérer :

Divi : ajouter une classe CSS à une colone

Et on utilisera ensuite les propriétés align-items et justify-content afin de spécifier le type de disposition.

Je vous présente ci-après les 6 cas d’utilisation qui me paraissent les plus utiles. Trois d’entre eux sont illustrés sur l’image de présentation de l’article 😉 Vous pouvez bien entendu utiliser d’autres noms de classe.

Alignement vertical des modules dans Divi

Ici, nous utilisons directement align-items afin d’aligner selon l’axe vertical (direction secondaire par défaut).

/* Bord supérieur (valeur par défaut, inutile dans ce contexte) */
.vertical-top { display: flex; align-items: flex-start; }

/* Centre */
.vertical-center { display: flex; align-items: center; }

/* Bord inférieur */
.vertical-bottom { display: flex; align-items: flex-end; }

Répartition régulière des modules

Cette fois nous changeons la direction principale afin d’utiliser justify-content sur l’axe vertical également.

/* Collés au bord */
.vertical-between { display: flex; flex-direction: column; justify-content: space-between; }

/* Décollés du bord 1 */
.vertical-around { display: flex; flex-direction: column; justify-content: space-around; }

/* Décollés du bord 2 (espaces plus réguliers) */
.vertical-even { display: flex; flex-direction: column; justify-content: space-evenly; }

Prenez garde à la gouttière !

L’image en haut de page illustre le cas d’une gouttière de 2. Avec les autres valeurs, la disposition est un peu altérée.

Par exemple, une gouttière de 0 supprime les marges verticales entre modules, donc le centrage vertical et les alignements en haut et en bas se retrouvent très compressés.

Au contraire, avec des gouttières de 3 ou 4, les marges augmentent et tout est au contraire très étiré : tout se ressemble un peu 🙁

Conclusion

Comme vous le voyez, la flexbox est on ne peut plus simple d’utilisation… Elle se fond de plus très bien dans l’environnement Divi. Nous avons vu dans cet article comment l’utiliser verticalement pour les modules d’une colonne. Je vous prépare pour la prochaine fois un topo plus horizontal sur l’ordre des colonnes dans une ligne.

Et pour vraiment conclure, si ces petites boîtes vous plaisent, je vous suggère ce superbe guide pratique de la flexbox. Il est clair, à jour, et surtout j’adore ses fiches et ses petits schémas 🙂