CSS : Fonction display: flex a un problème

didiergty 2 Messages postés mercredi 4 octobre 2017Date d'inscription 27 octobre 2017 Dernière intervention - 27 oct. 2017 à 00:55 - Dernière réponse : fredconv 124 Messages postés mardi 25 août 2009Date d'inscription 4 décembre 2017 Dernière intervention
- 4 déc. 2017 à 12:26
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 !!
Afficher la suite 
2Messages postés mercredi 4 octobre 2017Date d'inscription 27 octobre 2017 Dernière intervention

1 réponse

Répondre au sujet
fredconv 124 Messages postés mardi 25 août 2009Date d'inscription 4 décembre 2017 Dernière intervention - 4 déc. 2017 à 12:26
0
Utile
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 :)
Commenter la réponse de fredconv