CSS : Fonction display: flex a un problème [Fermé]

Signaler
Messages postés
2
Date d'inscription
mercredi 4 octobre 2017
Statut
Membre
Dernière intervention
27 octobre 2017
-
Messages postés
124
Date d'inscription
mardi 25 août 2009
Statut
Membre
Dernière intervention
4 décembre 2017
-
Bonjour à tous,

Je suis débutant et j'essaie de créer un site.
Malheureusement la fonction display: flex deconne.
J'ai créé un conteneur de type block avec 38% en hauteur et j'y ai inséré 3 images.
Celle-ci s'aligne a l'horizontale à la suite mais je veux utiliser justify-content:space-between. Lorsque donc je le mets les images s'étendent trop entre elles et l'image 2 se situe sur le bord a droite et l'image 3 sort carrément du "cadre". J'ai remarqué que lorsque je mettai juste display: flex cela créait le problème.
Voici le css:

html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
background-color: black;
}
h1
{
display: flex;
margin: 0;
background-image: url("test.png");
height: 30%;
margin-top: 0%;
}
.photo1
{
height: 50%;
width: auto;
}
.photo2
{
height: 50%;
width: auto;
}
.photo3
{
height: 50%;
width: auto;
}


Merci d'avance pour vos retours !!

1 réponse

Messages postés
124
Date d'inscription
mardi 25 août 2009
Statut
Membre
Dernière intervention
4 décembre 2017
37
Hello

Saurais tu poster ton code html pour que l'on ai une meilleure vue sur l agencement de ton code, qui est dans quoi stp ?

Quelles sont les largeurs de tes images par défaut ? ont elles toutes les 3 la même dimension ?

Tu ne 'set' aucun flex grow / shrink ou basis ?



sachant que les enfants d'un containeur en "display:flex" sont par défaut en flex: 0 1 auto ( il me semble ) cela influence leur largeur de départ ...

merci :)