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)
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)
