Le Blog

Le blog laboratoire de F.L.D. Studio

La mosaïque version Flexbox

Introduction

Parmis les utilitaires que j'ais eu à concevoir il en exite un baptisé mosaîque. Il s'agit d'une classe sous PHP qui calcule la taille que doivent faire chaque images pour participer à la création d'un motif toujours carré. Pour facilier sa mise en oeuvre j'ai aussi conçu un utilitaire AddOn sous JavaScript qui permet d'utiliser les nombreuses options de la classe et surtout in fine d'optenir le CSS AdHoc pour réaliser l'affichage de la mosaïque d'images.

Le but de ce post est de transformer la mosaïque qui fonctionne sur le principe CSS des éléments flottants en display flex lorsque la taille de l'écran à atteint la taille de l'élément parent de ce composant.

En utilisant le même balisage HTML et pratiquement les mêmes classes CSS que dans le post précédant qui relate de la création d'une galerie d'images fluides et responsives à l'aide du système d'affichage flexbox.

Points communs et différences

S'agissant d'afficher des images il existe de nombreux point communs entre ces deux systèmes de galerie d'images. Le premier point concernne le balisage HTML de représentation des galeries. Toutes deux sont contenues dans un élément parent ( wrapper ou container ) qui défini le système d'affichage des enfants ( les images ).

Galerie : Balisage HTML

Le container dispose d'un affichage de type flexbox et ses enfants (les ancres) sont définis avec des tailles en pourcentage ( Taux d'occupation d'une image et d'une marge au sein du container )

<div class="img-gal-container">
 <a href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Galerie 2 - Image caption">
  <figure>
  <img width="320" height="188" src="http://lorempixel.com/320/188/people" alt="Description image" />
  </figure>
  <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
  </a>

  ... autres images ....

Mosaïque : Balisage HTML

Le container dispose d'un affichage de type block et ses enfants (les ancres) sont surchargés avec les classes CSS qui guident leurs positionnements (left,right,taille,marge, etc...).

<div class="img-gal-container">
 <a class="mos-s1 fleft" href="https://feimosi.github.io/baguetteBox.js/img/medium/2-1.jpg" title="Galerie 1 - Image caption1 description dans title"> 
 <figure>
 <img width="700" height="525" src="http://lorempixel.com/700/525/people" alt="Description image" />
 </figure>
 <svg aria-hidden="true" role="presentation"><use xlink:href="#ico-plus">Plus</use></svg>
 </a>

Le style CSS

Le style d'affichage des images et des effets de hover,active, etc... sont identiques pour les deux système. La principale différence vient du traitement des marges pour l'affichage de la mosaïque et bien sur les classes de positionnement flottant des images.

Lorque la taille du viewport à atteint la taille du container parent de la mosaïque les rêgles du media-querie vont modifier le type d'affichage du parent pour le basculer en mode flexbox ainsi que modifier la taille des enfants, exactement comme pour l'affichage galerie. Au passage il supprime aussi toutes les rêgles concernant le positionnement flottant des enfants.

A la différence de la galerie, la taille des images de la mosaïque ne sont pas recalculées, elles sont abitrairements positionnées à 49,5% , soit deux images par rangée et la proprriété d'allignement des enfants du container : justify-content: space-between; est positionnée sur le parent. De la sorte on ne se préocupe plus des marges droites.