28172 sujets

CSS et mise en forme, CSS3

écart entre les éléments en display flex

bonjour je souhaitais aligner mes éléments avec flex, et en mettant les éléments en space between, seulement quand je me retrouve avec des cartes de nombres différentes ça crée un espace entre les cartes.
Pouvez vous m'indiquer une solution en centrant le tout sans avoir à créer une boite fictive. on m'a parlé de mettre une grande div en center mais cela ne semble pas marcher, merci

lien codepen:


https://codepen.io/anon/pen/wpMXNx?editors=1010
Modifié par ainou (18 Dec 2017 - 17:20)
Modérateur
Bonjour,

Si je comprends bien la question, lorsque la dernière ligne a un nombre de cartes inférieur aux autres, les cartes étant réparties sur toute la largeur, celles de la dernière ligne sont plus espacées que celles des lignes précédentes.

Si c'est bien ça la question, elle a été évoquée dans le post https://forum.alsacreations.com/topic-4-74043-1-Resolu-Text-align-centre-magic-de-grands-elements-HTML.html

En résumé, il faut soit recalculer en permanence les écarts avec javascript (déconseillé néanmoins), soit ajouter des cartes vides invisibles de largeur identiques aux autres cartes et de hauteur nulle dans le html, soit ajouter ces cartes invisibles via du javascript au chargement de la page (voir http://jsfiddle.net/6e72oa7e/ ).

Je ne pense pas qu'il y ait une solution en css pur qui règle le problème de la dernière ligne sans utiliser de cartes vides invisibles ou sans utiliser de javascript qui recalcule en permanence les écarts souhaitables entre les cartes.

Amicalement,
Modifié par parsimonhi (18 Dec 2017 - 20:13)
Sujet clos
Aller à