Effet masonry en CSS flexbox (sans JS)

Bonjour,

Je partage une astuce sur laquelle je suis tombé aujourd'hui.

J'aime bien la capacité de flexbox à créer un effet masonry avec une galerie d'images, c'est-à-dire à les arranger sans espace blanc malgré des hauteurs différentes. Exemple : http://w3bits.com/css-masonry/
Mais je reproche à cette technique de ne pas être utilisable pour des blocs contenant du texte à cause de l'ordre de haut en bas avant de passer de la droite à la gauche. Ce n’est pas naturel comme ordre de lecture. Là, dessus Masonry est bien meilleur.

Aujourd'hui je donnais un cours sur flexbox justement où j'expliquais ça et une de mes élèves m'a posé une question un peu candide : " Est-ce qu'on ne pourrait pas résoudre ce problème avec la propriété order du Flexbox layout ? " Je ne suis pas sûr qu'elle réalisait tout ce qu'il faut mettre en place, mais sa question m'a intrigué et je me suis penché dessus en rentrant chez moi.

J'ai mis en place une solution qui me semble vraiment intéressante en liant la propriété order à un nth-child basé sur le nombre de colonnes désiré. On retrouve ainsi un ordre de lecture naturel de la gauche vers la droite avant de passer du haut vers le bas. C'est sans JavaScript et facilement responsive.

Peut-être que ça a déjà été évoqué sur le web. Dans ce cas, n'hésitez pas à me dire que mon élève et moi, nous ne sommes pas très originaux. Si ça n'est pas le cas, enjoy. Si vous trouvez ça vraiment intéressant, je peux faire une démo un peu plus concrête. Du coup, n'hésitez pas à réagir.

Demo : http://codepen.io/mathiaspeguet/pen/ZLBjEz?editors=1100


Modifié par 7am (19 Jan 2017 - 00:29)

Pas mal du tout en effet ! Je m'y était essayé mais la solution que j'avais imaginé ne respectait pas l'ordre de lecture : Responsive Masonry in CSS only

Je teste votre code et vous fait un retour...
Modifié par Olivier C (18 Jan 2017 - 05:41)

Hello,

Olivier C a écrit :

La technique avec columm, avec son défaut du sens de lecture, comporte moins d'inconvénients au final.

À vrai dire 7am a bien opté pour une disposition en column, mais en modifiant les valeurs de order pour réordonner les éléments.

Pour ce qui est de la gouttière, c'est un problème inhérent à tous les types de positionnements (seul Grid Layout en propose de véritables), ce n'est donc pas bloquant pour moi.

Les hauteurs indiquées dans le Codepen sont purement indicatives, il s'agit (je pense) simplement d'émuler du contenu au sein de chaque élément. Ce point n'est donc pas bloquant non plus je pense.

Par contre, ce qui me gêne beaucoup plus c'est la nécessiter d'imposer une hauteur (height) fixe à l'ensemble de la grille. Là pour le coup, je trouve ça vraiment rédhibitoire

Raphael a écrit :


Par contre, ce qui me gêne beaucoup plus c'est la nécessiter d'imposer une hauteur (height) fixe à l'ensemble de la grille. Là pour le coup, je trouve ça vraiment rédhibitoire

C'est pour moi aussi le point négatif, car pour le coup, dés que la hauteur et insuffisante, on passe de 4 à 5 ou plus colonnes.

En complément de height,un min-height adapté serait probablement judicieux pour éviter ce carambolage

edit: exemple http://codepen.io/gc-nomade/pen/OWWRaM?editors=1100

re edit: Pour les gouttières un margin sauf sur les dernier de la ligne ? http://codepen.io/gc-nomade/pen/xggEmy?editors=1100


re re edit dernier petit mot Pour la piste en grid, cela me parait très verbeux .... et probablement tout autant rigide qu'un tableau
Modifié par gcyrillus (18 Jan 2017 - 18:34)

Merci pour vos réactions très intéressantes.

Je retiens que cette démo a un intérêt limité parce que...

Olivier C a écrit :
vous ne pourrez rien faire pour le conteneur principal.

Raphael a écrit :
ce qui me gêne beaucoup plus c'est la nécessiter d'imposer une hauteur (height) fixe à l'ensemble de la grille. Là pour le coup, je trouve ça vraiment rédhibitoire

Carément, je ne m'en étais pas rendu compte.

Olivier C a écrit :
les éléments ne sont pas en capacité de s'adapter à leur contenu.

C'est tout à fait juste. Sans y prêter suffisamment attention, j'ai basé leurs hauteurs sur une hauteur proportionnelle en %. Du coup, mon ensemble se redimensionnait facilement. Mais quand on teste avec un contenu texte qui définit une hauteur "fixe", en redimensionnant la fenêtre ça part complètement en vrille.
http://codepen.io/mathiaspeguet/pen/YNNrVy?editors=1100

Je rajoute un 3° point négatif rédhibitoire : le changement d'ordre ne change pas le fait que le Flexbox layout défini sa mise en page en colonne et ne place un élément à la colonne suivante que quand la précédente est remplie. Du coup, sur une grille de 16 éléments, si une colonne possède trop peu d'éléments (<4) parce que trop haut (trop de texte), ou trop d'éléments (>4) parce que trop petit, l'ordre n'est plus pertinent et ce système qui est sensé présenter une lecture naturelle part en vrille :
http://codepen.io/mathiaspeguet/pen/jyyGXp?editors=1100

Raphael a écrit :
Vite fait, je suis tombé sur cette proposition qui semble pas mal du tout même si je ne l'ai que survolée : http://codepen.io/inorganik/pen/pREYPJ.

Même défaut que le 3° défaut que j'indique : si on donne une hauteur vraiment très grande à un élément tout part en vrille.

Raphael a écrit :
Pour ce qui est de la gouttière, [...] seul Grid Layout en propose de véritables

C'est clair que ça fait déjà quelques années qu'il donne envie et je me réjouis de voir enfin que les navigateurs emboitent le pas à Microsoft.
Modifié par 7am (19 Jan 2017 - 00:34)