28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement de div complexe...

Bonjour, comme un dessin vaut mieux qu'un long bafouillage, voici un schéma simple de ce que je cherche à faire, malheureusement, je n'arrive pas à formuler clairement ma requête dans les moteurs, du coup, je passe par vos lumières !
Il s'agit d'une juxtaposition de div, crées à la volée en php, de hauteur variable en fonction de leur contenu, mais de largeur fixe. Comment obtenir ce genre de répartition en colonne sans qu'il y ait d'overflow ? Dans ce schéma, la div3 ne pouvait pas aller sous la div2 donc elle devait remonter en 2eme colonne etc...
Par avance merci beaucoup ! upload/1500740240-66702-test.jpg
Il y avait un sujet identique sur le forum mais je ne trouve plus où.

Tu as plusieurs possibilités :
- Isotope (avec js/jquery)
- Avec Flex box

Perso, j'utilise toujours isotope pour faire ce genre de truc (avec une grille bootstrap) donc je ne pourrai dire sur la viabilité des solutions avec flexbox. Et aucune idée de si tu peux aligner tes blocs verticalement et de gauche à droite avec flexbox.
Modifié par bzh (22 Jul 2017 - 18:56)
Bonsoir.

A priori, oui, c'est possible en Flexbox… pour que les blocs soient alignés verticalement, flex-direction: column; et pour qu'il y ait plusieurs colonnes flex-wrap: wrap;

La difficulté est la hauteur variable… si vous voulez que cela ressemble toujours à ce schéma.

Smiley smile
Meilleure solution
Modérateur
Bonjour,

flex semble effectivement une bonne piste avec une hauteur prédéterminée (un autre exemple https://codepen.io/gc-nomade/pen/QMLzGV height + min-height ) avec malgré tout un risque de débordement en colonne(s) supplémentaire(s) . Il faudrait pouvoir réactualisé la hauteur lorsque l'ensemble des contenus ne peuvent plus tenir dans le nombre de colonnes impartis ( un job pour javaScript).

Grid est moins adapté, à mon humble avis, car il impose de positionné les plus longs éléments sur plusieurs lignes pour s'imbriquer avec d'autre plus court sans laisser de trous, ce qui est problématique pour des contenus de tailles inconnues à l'avance.
Administrateur
gcyrillus a écrit :
Grid est moins adapté, à mon humble avis, car il impose de positionné les plus longs éléments sur plusieurs lignes pour s'imbriquer avec d'autre plus court sans laisser de trous, ce qui est problématique pour des contenus de tailles inconnues à l'avance.

Hello,

Je ne suis pas sûr de comprendre exactement ce que tu veux dire. Mais selon moi Grid Layout permet justement de s'affranchir de cette maudite hauteur obligatoire chez Flexbox et les autres, notamment grâce au remplissage automatique des "trous" via grid-auto-flow: dense : https://codepen.io/raphaelgoetter/pen/MpJMBo
Bonjour.
Raphael a écrit :

Je ne suis pas sûr de comprendre exactement ce que tu veux dire. Mais selon moi Grid Layout permet justement de s'affranchir de cette maudite hauteur obligatoire chez Flexbox et les autres, notamment grâce au remplissage automatique des "trous" via grid-auto-flow: dense

En ce qui concerne Flexbox, là, c'est moi qui ne suis pas sûre de comprendre : grâce à min-height: 100%, le conteneur Flexbox peut prendre une hauteur variable (ça ne suffit pas avec Internet Explorer, il faut rajouter un conteneur).

Évidemment, grid-auto-flow: dense est fait pour ça mais il a l'inconvénient de bouleverser la disposition des éléments ce qui n'est peut-être pas voulu…

Smiley smile
Modérateur
Raphael a écrit :

Hello,

Je ne suis pas sûr de comprendre exactement ce que tu veux dire.


En fait je parle des valeurs span x, pour remplir selon les contenus une ou plusieurs lignes.
Un viel exemple sans spanning avec un remplissage colonne par colonne, où chaques éléments d'une ligne finissent tous par avoir la même hauteur quelque soit leur contenu respectif Smiley decu https://codepen.io/gc-nomade/pen/BpZZQW )
Modifié par gcyrillus (23 Jul 2017 - 18:56)
Ok, merci à tous !!! vous êtes au top ! J'ai testé les deux, flex et grid, le plus approprié se trouve être flex , ça marche au poil ! Je vous remercie beaucoup ! Smiley smile Smiley smile Smiley smile
Administrateur
Zelena a écrit :
En ce qui concerne Flexbox, là, c'est moi qui ne suis pas sûre de comprendre : grâce à min-height: 100%, le conteneur Flexbox peut prendre une hauteur variable (ça ne suffit pas avec Internet Explorer, il faut rajouter un conteneur).

min-height ne fonctionnera pas : les éléments ne seront pas forcés à changer de colonne, ils ne feront qu'allonger la hauteur du conteneur Smiley decu
Bonjour.
Raphael a écrit :

min-height ne fonctionnera pas : les éléments ne seront pas forcés à changer de colonne, ils ne feront qu'allonger la hauteur du conteneur Smiley decu

Vous avez raison : pour Flexbox, il faut de tout façon une 'largeur' fixe, la 'hauteur', elle, peut varier.
Smiley smile
Sujet clos
Aller à