28106 sujets

CSS et mise en forme, CSS3

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

Smiley cligne
Modifié par 7am (19 Jan 2017 - 00:29)
Donc j'ai testé et j'ai relevé un point négatif (édit : et non deux comme je l'avais dit plus tôt, mais reste le point le plus problématique) : les éléments ne sont pas en capacité de s'adapter à leur contenu.

Je pense que ce points est non-négociable pour du Masonry. Vous pourriez compenser en partie cette lacune en remplaçant les height par des min-height sur les items mais vous ne pourrez rien faire pour le conteneur principal. Du coup cette technique sera réservée à des usages très spécifiques, éventuellement...

La technique avec columm, avec son défaut du sens de lecture, comporte moins d'inconvénients au final.
Modifié par Olivier C (18 Jan 2017 - 14:31)
Administrateur
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 Smiley ohwell
Raphael a écrit :
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.

Oui exact, j'étais en train de modifier mon post de ce matin à ce sujet mais tu as répondu avant moi...
Modifié par Olivier C (01 May 2018 - 20:23)
Modérateur
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 Smiley ohwell


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 Smiley smile

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 Smiley smile Pour la piste en grid, cela me parait très verbeux .... et probablement tout autant rigide qu'un tableau Smiley smile
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 Smiley ohwell

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. Smiley decu


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)