Bonjour,
J'essaie d'utiliser les flex-box sur ce sénario : (fiddle plus bas)
J'ai 3 div dans un container,
2 div sont "petit", et 1 est "gros"
les 3 div sont empilé les uns sur les autres sur 1 colonne,
si on étire assez l'écran (horizontalement), on affiche ces 3 div sur 2 colonnes au lieu d'une.
On a comme contraintes :
- Il faut mettre les 2 "petits" div dans la même colonne, et le gros dans l'autre colonne.
- pas le droit de modifier le HTML
- pas le droit aux "float", il faut utiliser les flex box.
J'ai fais un fiddle pour être plus clair :
https://jsfiddle.net/stxhw203/
Mon problème sur ce fiddle c'est que j'aimerai que,
quand la fenêtre est assez large, le orange se déplace vers le haut pour aller se "coller" sous le jaune,
alors que là il "bloque" sous la hauteur du rouge.
8 réponses
[EDIT]
Je mets une bien meilleure solution donnée par Benjamin Derepas :
Solution
https://jsfiddle.net/jg3a5g4g/
Solution NULLE :
Salut betaWeb,
Oui, merci.
Enfin bon ça ne m'aide pas du tout... ;)
J'ai l'impression que c'est impossible en fait (en flex-direction: row).
Une idée serait de laisser le flex-direction: column,
et on ramène la hauteur du container à la plus haute des 2 colonnes.
Comme ça le div3 va "wrap" sur la 2ème colonne.
Si dans le fiddle, on remplace le @media par celui-là, ça fonctionne :
@media (min-width: 700px) {
.container {
flex-wrap: wrap;
height: 310px; // hauteur jaune + hauteur orange + 2*margin-bottom ----- 120 + 150 + 2*20 = 310
}
.container > div {
width: 30vw;
}
}Mais normalement il faudrait déterminer laquelle des colonnes sera la plus grande, alors :
- soit on a quelque chose de très statique et on peut mettre les valeurs en dur (comme avec le fiddle)
- soit on travaille avec des variables :
@media (min-width: 700px) { .container { ... height: calc(max($div1_height + $marge_bottom + $div2_height, $div3_height) + $marge_bottom); } ... }
Passons, c'est oublié.
De la même manière que les row sous bootstrap ou foundation, les containeurs flex peuvent s'emboiter les uns aux autres. Autrement dit, un child héritant du display flex peut lui même devenir container flex.
En gros tu aura une colone à droite (rouge) et une autre colonne à gauche , elle même en display flex (en column cette fois ci), contenant les enfants (jaune et orange).
Normalement en jouant là dessus, tu devrai résoudre ton problème.
Tu te complique la vie là avec tous tes calculs . L'avantage de flexbox, c'est que c'est un module de positionnement intelligent, donc pas la peine de s'encombrer avec tout le reste (padding, float, position etc).
Je vais te redonner la même solution que @betaWeb => apprendre les bases de flexbox .
Ps : petite astuce, je te laisse chercher par la suite, mais par défaut les margin sont à auto, essais donc de forcer ces dernières à 0.
Salut,
Je vais te redonner la même solution que @betaWeb => apprendre les bases de flexbox .
Le même lien que BetaWeb...
que j'avais déjà lu entièrement avant que BetaWeb ne me le propose.
Pas super utile, mais merci quand même hein.
Après je comprend que vous le recommandiez,
c'est le meilleur lien que j'ai trouvé, avec celui d'asla création :
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Ps : petite astuce, je te laisse chercher par la suite, mais par défaut les margin sont à auto, essais donc de forcer ces dernières à 0.
Je ne vois pas pourquoi tu me parles des margin,
ça n'a rien à voir avec mon problème,
j'ai essayé à tout hasard... Mais non, ça ne règle pas le problème.
L'avantage de flexbox, c'est que c'est un module de positionnement intelligent, donc pas la peine de s'encombrer avec tout le reste (padding, float, position etc)
En fait les propriétés qu'on utilise pas avec les flex, sont :
- column
- float
- clear
- vertical-align
On pourrait toujours avoir besoin de position si on veux sortir un élément du flux (par exemple).
Même en flex, les padding restent utile, on ne doit pas se forcer à ne plus les utiliser, la fonctionnalité qu'ils offrent n'est en rien incompatible avec les flex.
Tu te complique la vie là avec tous tes calculs.
Tu as essayé de réfléchir au problème ?
Ce n'est pas si évident.
Moi, c'est la seule solution que j'ai trouvé.
Par contre je reconnaît tout à fait que j'ai pu passer à côté d'une meilleure solution.
D'où l'objet de ce sujet.
Visiblement tu connais mieux le module que @betaweb ou moi même je te laisse donc chercher ...
Un esprit aussi brillant que le tiens ça ne devrait pas avoir trop de mal à trouver.
Ah, et si tu ne trouves toujours pas, va faire un tour ici
Visiblement tu connais mieux le module que @betaweb ou moi même je te laisse donc chercher ...
Je n'ai jamais dis ça, et surtout pas en parlant de BetaWeb, merci de ne pas le mêler à ça.
Un esprit aussi brillant que le tiens ça ne devrait pas avoir trop de mal à trouver.
Encore une fois pas du tout...
Ah, et si tu ne trouves toujours pas, va faire un tour ici
Je suis allé voir,
j'ai trouvé ça super sympa, je ne connaissais pas, merci.
Enfin, ça montre quand même que tu n'as toujours pas réfléchi au problème parce-que ça n'y répond pas.
Si tu penses que ce que je t'ai dis dans le message précédent était injustifié ou incorrect, je te présente mes excuses.