[Résolu] Justify content ne fonctionne pas par RémyHTML - page 1

Bonjour à tous,

Je rencontre un petit problème. J'ai un bloc "titre" dans lequel se trouve 2 bloc "titre_page" et "image". J'ai mis l'option flexbox à mon titre puis j'ai opté pour un alignement en colonne. Jusque là tout fonctionne correctement. Et là c'est le drame, j'essaye d'appliquer un space between pour mettre mon bloc "titre_page" en haut et mon bloc "image" en bas du bloc "titre" mais rien ne se passe. J'ai cherché pendant pas mal de temps, je ne vois pas trop où ça merdouille..

Merci de votre futur aide,

Rémy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="code.css">
		<title> L'éreuthophobie</title>
	</head>


<body>

<div id="header">

<!--***********TITRE + IMAGE**********-->
<header id="titre">
	
	<h1 class="titre_page"> L'éreuthophobie</h1>
	<figure class="image">
		<img id="image" src="tomate_petit.png" alt="rougissement"/>	
	</figure>
		
	

<br><br>
</header>


<!--***********MENU NAVIGATION**********-->
<nav id="menu">
	<h2>Le sommaire <br></h2>
	<ul>
		<li> <a href="quesaco" class="nav">L'éreuthophobie, quésaco?</li>
		<li> <a href="#therapies"  class="nav"> Les thérapies </a></li>
		<li> <a href="#operation"  class="nav">L'opération</a></li>
		<li> <a href="#medicament" class="nav">Les médicaments</a></li>
	</ul>
</nav>

<div id="logo">
</div>
</div>

<!--***********SECTION: Introduction**********-->
<section>
	<h2>L'éreuthophobie qu'est-ce que c'est?</h2>
	<p>L'éreutophobie (ou érythrophobie), désigne la peur de rougir en public. A l'extrême, cette phobie sociale peut mener les personnes qui en souffrent à fuir toutes les situations à risque (parler en public, donner un ordre, aborder un inconnu...), à s'isoler et raréfier tous rapports sociaux. Cette angoisse générée par le regard de l'autre, la peur d'être jugé ou d'être ridicule touche aussi bien les adultes que les enfants et peut avoir des conséquences néfastes sur la vie professionnelle ou scolaire. L'éreutophobie trouverait son origine dans un traumatisme, un blocage psychologique, une timidité excessive ou même l'hérédité...</p>
</section>

<!--***********SECTION: therapies**********-->
<section id="therapies">
	<h2>Les thérapies</h2>
</section>

<!--***********SECTION: operation**********-->
<section id="operation">
	<h2>Les thérapies</h2>
</section>

<!--***********SECTION: medicament**********-->
<section id="medicament">
	<h2>Les médicaments</h2>
</section>




<!--***********FOOTER**********-->
<footer>
	<p>Copyright Rémy - Tous droits réservés <br>
	<a href="contact"> Me contacter</a>
	</p>
</footer>


</body>
</html>

/* Définition d'une nouvelle police */
@font-face{ 
	font-family: 'champagne';
	src: url('polices/cac_champagne/cac_champagne-webfont.eot') format('eot');
	src: url('polices/cac_champagne/cac_champagne-webfont.svg') format('svg');
	src: url('polices/cac_champagne/cac_champagne-webfont.ttf') format('truetype');
	src: url('polices/cac_champagne/cac_champagne-webfont.woff') format('woff');

	}
@font-face{
	font-family: 'agane';
	src: url('polices/agane/agane.svg') format('svg');
	src: url('polices/agane/agane.eot') format('eot');
	src: url('polices/agane/agane.ttf') format('truetype');
	src: url('polices/agane/agane.woff') format('woff');
}

/* Les paragraphes */
p
{
	font-size: 1em;
	font-family: arial;
	text-align: justify;

}

/* Les titres */
h1
{
	text-align: center;
	font-family: champagne;
	font-size: 6em;
}

h2
{
	font-family: Courier New;
	margin-left: 20px;

}

.nav
{
	font-size: 1.5em;
	font-family: Courier New;

}

section
{
	background-color:rgb(204, 255, 255) ;
}


a:hover
{
	color:blue;
}

a:visited
{
	color:blue;
}
p:hover
{
	border-left: 3em solid white;
}

#image
{
	border: 2px solid black;
	border-radius: 8px;

}




























/*La banière de la page*/
#header
{
display: flex;
border: 1px solid black;
justify-content: space-between;
background-image: url(baniere_site.jpg);
background-size: cover;
height: 700px;
}

	/*Le menu de navigation*/
	#menu
	{
		display: flex;
		border: 1px solid black;
		flex-direction: column;
		/*background-color: yellow;*/
		width: 21%;
	}	

	/*Le titre+ l'image*/
	#titre
	{
		border: 1px solid black;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		order: 2;
		width: 50%
		
	}
		/*Le titre
		.titre_page
		{
			/*border: 2px solid black;*/
		}
		/*L'image*/
		.image
		{
			margin-bottom: 0px;
			/*border: 1px solid black;*/
		}




	/*Le logo*/
	#logo
	{
		/*border: 1px solid black;*/
		width: 21%;
		order: 3;
	}

RémyHTML

21 avril 2018 à 15:45:20