[Résolu] Flexbox et gestion de la position verticale et horizontale

Bonjour
je vois souvent des exemples où les boites sont soit toutes horizontales soit toutes verticales.
Supposons que j'ai 5 boites, je veux faire une croix.
Est ce que je dois faire un contenaire avec 5 boites (comment) ou un contenaire avec 3 boites pour le flex-direction: row et sur la boite du milieu refaire un contenaire de 3 boites avec flex-direction: column. (Que je n'arrive pas à faire fonctionner)
Si quelqu'un a une idée

Bonjour,

Y a plein de manières de faire ça. Tout dépend des contraintes que tu as (connais-tu a priori ou pas les dimensions des boites par exemple) !.

Supposons que ton code HTML soit le suivant :

<div class="b0">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
</div>

Si tu connais les dimensions de tes boites, tu peux par exemple employer le css suivant (à adapter) :

.b0 {position:relative;width:15em;}
.b1, .b2, .b3, .b4, .b5 {width:5em;height:5em;}
.b1 {background:red;margin:0 auto;}
.b2 {background:green;margin:0 auto;}
.b3 {background:blue;position:absolute;top:5em;left:0;}
.b4 {background:orange;position:absolute;top:5em;right:0;}
.b5 {background:pink;margin:0 auto;}

Amicalement,
Modifié par parsimonhi (30 Dec 2014 - 18:07)

Merci mais je cherche une solution avec les flexbox

Bonjour,

Est-ce que ça t'irait, ça :

.b0 {display:flex;flex-wrap:wrap;}
.b1, .b2, .b3, .b4, .b5
{
    width: 33.33%;
    height: 5em;
}
.b1 {background:red;margin:0 33.33%;}
.b2 {background:blue;}
.b3 {background:green;}
.b4 {background:orange;}
.b5 {background:pink;margin:0 33.33%;}

Amicalement,

je vais essayer (et tacher de comprendre)

Bonjour,

Note que si tes boites ont du contenu, tu n'as pas besoin de donner un height aux boites .b1, .b2, .b3, .b4, et .b5. Le flex s'en charge. J'avais mis ce height dans mes tests pour que les boites soient visibles même si elles étaient vides.

Voir http://jsfiddle.net/parsimonhi/ajLhLmkg/

Amicalement,
Modifié par parsimonhi (30 Dec 2014 - 19:45)

Bonjour,

Merci pour cette discussion et la très jolie solution apportée par parsimonhi !

Je me suis permis de l'illustrer sur un Codepen que je prévois d'ajouter dans ma collection Jack in the Flexbox, si tu es d'accord parsimonhi bien entendu

Note : si vous voulez tester rapidement des alignements de Flexbox, n'oubliez pas l'excellente ressource qu'est http://the-echoplex.net/flexyboxes/

Bonne journée

Raphael a écrit :
Bonjour,

Je me suis permis de l'illustrer sur un Codepen que je prévois d'ajouter dans ma collection Jack in the Flexbox, si tu es d'accord parsimonhi bien entendu

Tu as évidemment mon accord.

Amicalement,

Merci beaucoup

ok ça marche
mais cela reste incompréhensible pour moi
Je pensais que le margin avait 4 positions mais margin 10px fait une marge tout autour de l'élément.
Un bon tutorial sur les marges?
PS si pour b1 (ou b5) je remplace 33.33% par 66.66% la boite se déplace bien mais perd sa couleur. un mystère de plus!
merci et bon réveillon

Merci (j'espère que le texte va être assez long maintenant)

jean202 a écrit :

Je pensais que le margin avait 4 positions mais margin 10px fait une marge tout autour de l'élément

La propriété margin peut avoir de 1 à 4 valeurs.

S elle n'a qu'une valeur, ça signifie que les marges sur les 4 côtés sont identiques et égales à cette valeur.

Si elle a 2 valeurs, ça signifie que les marges en haut et en bas sont égales à la première valeur, et les marges à droite et à gauche égales à la deuxième valeur.

Si elle a 3 valeurs, ça signifie que la marge du haut est égale à la première valeur, les marges de gauche et droite à la deuxième valeur, et la marge du bas à la troisième valeur.

Si elle a 4 valeurs, ça signifie que la marge du haut est égale à la première valeur, la marge de droite à la deuxième valeur, la marge du bas à la troisième valeur, et la marge de gauche à la quatrième valeur.

jean202 a écrit :
PS si pour b1 (ou b5) je remplace 33.33% par 66.66% la boite se déplace bien mais perd sa couleur. un mystère de plus!

Bizarre : je n'observe pas ça dans mon navigateur. Tu utilises quoi pour visualiser tout ça ?

Amicalement,

IE 11 et Chrome 39.0.2171.95 m
même phénomène perte de la couleur de la b1 avec 66.66%

Et tu as pris mon code tel quel ou bien tu as rajouté des trucs ? (ça peut influer)

Amicalement,

Bonne année
non j'ai utilisé ton lien (c'est peut-être le soft du site qui ne fonctionne pas correctement?)

Bonjour,

Si, dans l'exemple http://jsfiddle.net/parsimonhi/ajLhLmkg/ je remplace .b1 {background:red;margin:0 33.33%;} par .b1 {background:red;margin:0 66.66%;} sans rien modifier d'autre, le bord gauche de la boite b1 va au 2/3 de la largeur du conteneur b0, et la boite b1 devient plus étroite. Voilà ce que j'observe. Je ne sais pas si c'est ça que tu appelles une perte de couleur. Mais en tout cas, ce comportement ne me semble pas anormal.

Amicalement,

Bonjour
oui et elle n'a plus de couleur !! (perte de la caractéristique red)
A+

Bonjour,

Je soupçonne que tu as fait une erreur de syntaxe dans la ligne correspondante. Vérifies-bien !

Amicalement,

Bonjour à tous,

j'ai suivi avec intérêt les échanges de cette page du forum et j'ai testé la solution appliqué ici mais dans un tout autre cadre et, évidemment, cela ne fonctionne absolument pas !
J'ai un "table" avec un <thead> qui contient un <tr> et plein de <th> et ce qu'il me faudrait en fin de compte c'est que un <th> sur deux se mettent l'un en dessous de l'autre formant ainsi visuellement une seconde ligne .
J'ai testé avec flexbox: display: flex; flex-direction: row; flex-wrap: wrap; pour le parent et de mettre un élément sur deux en align-self: flex-start et le deuxieme align-self: flex-end;

mais le résultat n'est pas génial; je peux séparer 1 <th> sur 2 c'est bon mais je n'arrive pas à faire 2 lignes distinctes bien l'une au-dessous de l'autre ...
la chose est-elle possible d'après vous ou pas ?

j'ai mis le code d'exemple ici

Au passage, merci beaucoup @raphael goetter pour le "Jack in the flexbox", une merveille !
Ma référence dès que j'ai un souci de positionnement, un truc à réaliser avec les pieds au mur et la tête à l’envers tu vois, et on cours trouver une soluss dans le Jack, bien pratique ! Mais là pour ce cas précis, j'trouve pas

merci à tous
Modifié par eviouchka (03 Aug 2015 - 16:54)