Bonjour à tous !

Je tente de réaliser un site en fonction d'un modèle que j'ai en format .jpg , c'est un exercice que l'on me demande de faire dans lequel on m'a fourni tous les fichier nécessaires. Sauf que voilà je bloque complètement sur l'agencement des photos avec Flexbox.

J'ai suivi beaucoup de tuto, j'en trouve aucun qui m'aide dans la disposition dont j'ai besoin.

En gros je suis censé aligné 5 images; une qui prend la majorité de la place sur la gauche, puis les 4 autres qui comblent le vide sur la droite en carré (comme le montre la photo ci-dessous).

Pour l'instant j'ai réussi juste à aligner l'image du lion, et des deux photos en haut à droite (en trichant un peu en jouant avec les marges, il y a que comme ça que j'ai réussi ...). Mais je suis sûr qu'il doit exister une solution propre pour me permettre d'avoir ce résultat !

Je vous met quand même le code qui concerne cette partie, là où j'en suis (sans le texte pour l'instant, je m'occupe surtout des images) :

<divid="images">

<divclass="imageLion">
<imgsrc="images/bnr2.jpg"alt="lion">
</div>
<divclass="imageElephant">
<imgsrc="images/g2.jpg"alt="elephant">
</div>

<divclass="imageLynx">
<imgsrc="images/g1.jpg"alt="lynx">
</div>

<divclass="imageOiseau">
<imgsrc="images/g4.jpg"alt="oiseau">
</div>

<divclass=imageReptile>
<imgsrc="images/g3.jpg"alt="reptiles">
</div>

</div>


/* CSS for pictures */

#images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 580px;
}

.imageLion {    
}

.imageLion img {
flex: 10auto;
width: 86.2%;
display: block; /* IE fix */
}

.imageElephant {
margin-left: -148px;
}

-
Edité par MatthieuCarl 6 décembre 2017 à 17:32:13

Bonjour,

Première chose si tu ne veux pas te faire taper sur les doigts : lorsque tu partages du code sur le forum, fais le en utilisant le bouton </> du forum.

En ce qui concerne ton problème d'agencement, je me demande s'il ne serait pas plus simple d'utiliser un positionnement type grid layout (https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html) dans ce genre de cas ?

Si tu veux absolument utiliser flexbox, j'aurais tendance à séparer dans deux containers différents la grande image à gauche et les 4 petites de droite.

-
Edité par Mewen_bzh 6 décembre 2017 à 17:23:00

Pardon je l'ai modifié , j'avais pas vu la fonction en effet :).

J'avais aussi pensé à les séparer en deux containers différents, je vais essayer de me pencher plutôt sur cette solution. Il faut que je trouve comment faire par contre pour faire en sorte que les deux containers soit à côté. Et non pas que le deuxième se mette en dessous du premier, c'est un vrai casse-tête

Ça m'a l'air d'être une excellente solution !! 

Je suis entrain de la mettre en place je pense réussir à m'en sortir , je répondrais au post si jamais j'ai un soucis , en tout cas merci beaucoup pour ton aide !

-
Edité par MatthieuCarl 6 décembre 2017 à 18:10:05

MatthieuCarl, flexbox te demandera certains efforts de compréhension, je te conseil de faire des schémas

tu dois te dire quel est la direction principale des éléments, mais d'ailleurs, de quels éléments on parle ? est-ce qu'on parle de conteneur, si oui, lesquels etc