28172 sujets

CSS et mise en forme, CSS3

Flexbox, faire flotter les éléments

Bonjour,
J'ai une mise en forme avec flexbox. Mes éléments s'alignent horizontalement et leur parent a flex-wrap: wrap afin qu'ils puissent revenir à la ligne. Le problème c'est que la hauteur comme la largeur de mes éléments peut varier, et j'ai besoin qu'ils occupent toute la place disponible. Par exemple, si un élément et suivi de deux autres dont la hauteur et deux fois moins importante, j'aimerais qu'ils flottent à la droite du premier élément.

Voilà un schéma:

upload/43453-schema.png

Est-il possible de faire cela avec flexbox ?
Pour plus de facilité, j'aurais mis une display: flex; sur le conteneur et du inline-block sur les enfants .. mais cela ne répond pas à ta question Smiley smile
Modifié par JENCAL (08 Sep 2016 - 15:29)
Administrateur
JENCAL a écrit :
Pour plus de facilité, j'aurais mis une display: flex; sur le conteneur et du inline-block sur les enfants ..

En fait, inline-block sur les enfants ne sera pas pris en compte si le parent est en display: flex.

Pour répondre à la question, ... ça dépend. En résumé :
- ce n'est pas faisable nativement ou simplement, sauf en englobant les enfants 2 et 3 dans un conteneur supplémentaire
- la vraie bonne technique est / sera Grid Layout (encore inexploitable en production)
- il existe des bidouilles avec float (je n'ai pas d'exemple sous la main)
- il existe des bidouilles en JS (masonry, isotope)

Bonne chance Smiley cligne
Raphael a écrit :

En fait, inline-block sur les enfants ne sera pas pris en compte si le parent est en display: flex.



ah ok, la prochaine fois j’essaierais mes dires avant de me prononcer :=)
Bonjour.
Je me permet de poster ici puisque c'est le même soucis.
Si je comprend bien le fil de discutions, il n'est pas possible d'aligner des blocs sur la hauteur du premier avec flexbox.

Merci
Administrateur
ali13 a écrit :
il n'est pas possible d'aligner des blocs sur la hauteur du premier avec flexbox.

Cela dépend des contraintes. Mais ce ne sera pas inné avec flexbox en effet.
Raphael a écrit :

Cela dépend des contraintes. Mais ce ne sera pas inné avec flexbox en effet.


En l'état du peu d'informations données sur le cas à étudier, ça ne semble pas faisable.

En revanche, selon en fonction de contraintes plus précises, il peut être possible de faire des choses.
Par exemple :

- "la hauteur comme la largeur de mes éléments peut varier". On peut résumer ça en disant que le ratio des images peut varier. Mais une dimension d'affichage est-elle forcée par le style ? Par exemple que les images d'affichent sur deux colonnes (donc width 50%).
- "si un élément est suivi de deux autres". Ces éléments sont intégrés à la main, par un CMS ? Peuvent-ils être selon certains critères réunis dans un conteneur ?
- Une justification sur les quatre bords est-elle souhaitée pour le cas du "comportement voulu" ?

Globalement ce qui est souhaité c'est reproduire le rendu du célèbre script Masonry
Administrateur
erwan21a a écrit :

Globalement ce qui est souhaité c'est reproduire le rendu du célèbre script Masonry
Oui (cf. ma première réponse au début du post)
Modifié par Raphael (16 Sep 2016 - 15:59)
Bonjour et merci pour les réponses.

Non dans mon cas j'aimerais faire ça en utilisant flexbox.
http://img15.hostingpics.net/pics/650322intract5.jpg

Mes boites Un,Deux,Trois,Quatre et Cinq sont dans une Div#conteneur et je voulait que Deux,Trois,Quatre et Cinq s’appuie sur la boite Un, sans avoir à y ajouter une autre Div.
symboliser en rouge.

Mes je ne comprend pas le " Cela dépend des contraintes "
ali13 a écrit :

Non dans mon cas j'aimerais faire ça en utilisant flexbox.


Enfin si parce qu'on ne peut pas faire tout ce que l'on souhaite avec n'importe quelle techno Smiley smile

ali13 a écrit :

Mes je ne comprend pas le " Cela dépend des contraintes "


Les technologies ont leurs limites.
Selon les contraintes, celles-ci auront donc la possibilité de résoudre le problème ou non.
CSS est une technologie très limitée par rapport aux autres langages.
Souhaiter peu de contraintes au niveau de l'intégration signifie avoir beaucoup de contraintes au niveau du code (il faut bien que les contraintes s'appliquent quelque part). CSS ne peut tout simplement pas gérer seul autant de contraintes.

Donc si tu restreint ton cas d'utilisation, peut-être qu'une solution est possible en CSS. Mais dans l'absolue, telle que présenté dans ce topic, CSS seul ne pourra y répondre.
connecté
Bonjour,
ali13 a écrit :
Mes boites Un,Deux,Trois,Quatre et Cinq sont dans une Div#conteneur et je voulait que Deux,Trois,Quatre et Cinq s’appuie sur la boite Un, sans avoir à y ajouter une autre Div.
symboliser en rouge.

Ce cas précis est réalisable mais il faudra attendre un support acceptable pour Grid layout. En attendant, pour flexbox, il faut effectivement une div...

Des exemples flexbox en rapport : Nested Grid with flexbox
Modifié par Olivier C (19 Sep 2016 - 16:57)
Sujet clos
Aller à