FLEXBOX je n'arrive pas à modifier mes blocs

De plus, la troisième couleur a disparu

Sujet résolu

27 février 2020 à 20:37:07

Bonjour à tous,

Voici mon code HTML:

<!DOCTYPE html>
<HTML>
	<head>
		<META charset="UTF-8"/>
		<title>LE TITRE DE MA PAGE</title>
		<link rel="stylesheet" href="css/drapeau3.css"/>
	</head>

<body>
	<div id="conteneur">
	    <div class="element 1"></div>
	    <div class="element 2"></div>
	   	<div class="element 3"></div>    

	</div>

</body>

</HTML>

Et mon code CSS:

#conteneur{	border: 2px solid #444;
			display: flex;
			/*flex-direction: row-reverse;*/
			/*flex-wrap: wrap;*/
		 /*	justify-content: space-around;*/
			
			
			/*align-items: stretch;*/
			

}

.element{ width: 150px;
			height: 400px;		
			
}

.element:nth-child(1){ background-color: blue;

}

.element:nth-child(2){ background-color: yellow;

}

.element:nth-child(3){ background-color: red;

}

Je ne cède pas à la difficulé, j'ai fait une multitude de tests et je n'y comprends rien...

Et tout d'un coup, sans que j'aie rien changé, la 3eme couleur revient et, à nouveau,

j'arrive à élargir mes blocs pour occuper toute la page... Vous avez une idée ?

-
Edité par ChristianRamon1 27 février 2020 à 20:44:08

21baki

28 février 2020 à 1:42:01

Bonsoir,

Il faudrait un peu plus de détails. Quelle est la nature de ton problème ? Que cherches-tu à faire exactement ?

Pour te simplifier la vie, donne des id différents à chacune de tes <div>(oublie les espaces et met plutôt un underscore : element_1) :

<div id="conteneur">
        <div id="element_1" class="element"></div>
        <div id="element_2" class="element"></div>
        <div id="element_3" class="element"></div>   
 
</div>

Tu peux simplement modifier leur css en les appelant comme ceci dans ton css :

#element_1{ 
   background-color: blue;
}
 
#element_2{ 
   background-color: yellow;
}
 
#element_3{ 
   background-color: red;
}
.element { 
   width: 150px;
   height: 400px;
}

-
Edité par 21baki 28 février 2020 à 1:49:19

ChristianRamon1

29 février 2020 à 19:35:28

Bonjour,

Merci à toi 21baki, en fait je voulais juste faire varier la largeur de mes blocs pour occuper toute la page, mais pendant un moment, non seulement le paramètre width n'avait plus aucun effet mais j'ai même eu la disparition de mon 3eme bloc.

j'aurais du mal à donner davantage puisque les symptômes ont disparu. Je me dis que cela ressemble à un bug passager...d'autant que pendant tout ce temps là je ne modifiais que très peu de choses (width et dans des proportions raisonnées)

Merci encore et à bientot

Christian