Bonjour, je souhaiterais savoir si c'était possible de positionner différemment certains éléments avec la propriété FLEX.
Je souhaiterais mettre le TITRE un peu plus haut, et le bouton " Par ici " un peu plus haut également.
Est-ce possible avec Flex ou dois-je plutôt me tourner vers la propriété float pour ce genre de chose?
Je précise que j'ai utilisé display flex pour la mise en page de mon header ( un titre et un menu ) et pour la partie "main" qui contient l'image, un titre et un bouton.

Voir l'image ci dessous commentée avec les flèches pour comprendre ce que je souhaiterais faire et voir le code html et css de ma page d'essai sous l'image:

Nom : Capture d’écran 2020-07-27 à 12.05.28.png Affichages : 74 Taille : 596,6 Ko

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
	<title>Travel Agency</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
 
 
<body>
 
	<header>
 
		<div class="conteneur_header">
			<h1 class="titre">Travel Agency<span class="dot">.</span></h1>
 
			<nav>
				<ul>
					<li><a href="#main">Acceuil</a></li>
					<li><a href="#planification">Destinations</a></li>
					<li><a href="#circuit">Circuits</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</nav>
		</div>
 
	</header>
 
 
 
 
	<section id="main">
 
		<div class="conteneur_main">
 
			<h2>Organisez votre <br><span class="bold">voyage sur mesure</span></h2>
			<a href="#" class="button1">Par ici</a>
 
		</div>
 
	</section>
 
 
 
    <section id="planification">
 
	</section>
 
	<section id="circuit">
 
	</section>
 
	<section id="contact">
 
	</section>
 
	<footer>
 
	</footer>
 
 
 
 
</body>
</html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**************REGLAGES GENERAUX************************/
 
*
{
	margin:0;
	padding:0;
	font-family: arial,serif,sans-serif;
}
 
h2
{
	text-transform: uppercase;
	font-weight: normal;
	font-size: 50px;
	color: #6B696C;
	text-align: center;
 
}
 
@font-face
{
	font-family: "creteround";
 	src: url("/Users/florent/Desktop/projethtml/Crete_Round/CreteRound-Regular.ttf"),
        url("/Users/florent/Desktop/projethtml/Crete_Round/CreteRound-Italic.ttf") ;
}
 
/**********PARTIE HEADER**********************************************************/
 
/* FORMATAGE DU TITRE */
 
.titre	
{
	font-family: creteround;
	font-size: 45px;
	color: #6B696C;
}
.dot
{
	color: orange;
}
 
 
/*SUPPRESSION PUCE ET FORMATAGE DU MENU */
 
nav ul 
{
	list-style: none;
}
 
nav ul li a 
{
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	color: #6B696C;
	padding-right: 15px;
	font-size: 15px;
}
 
nav ul li a:hover
{
	color:black;
}
 
nav ul li
{
	display: inline;
}
 
/**************************************/
 
.conteneur_header
{
	display: flex;
	height:100px;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
 
/*********************************PARTIE MAIN ************************************/
 
.bold	
{
	font-weight: bold;
}
 
.conteneur_main
{
	background:url(/Users/florent/Desktop/projethtml/images/main.jpg) center;
	height: 550px;
	width: 100%;
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
 
}
 
/*************BOUTON PAR ICI*********************/
 
.button1 
{
	display:block;
	width:125px;
	line-height:40px;
	text-align:center;
	vertical-align:middle;
	background:#ff7700;
	color:white;
	border:none;
	text-decoration:none;
	border-radius: 10px;
}
 
.button1:hover 
{
	background:#ffa14f;
}
 
/******************************************************/

Je suis très débutant, certainement de nombreuses choses sont à reprocher sur ce code, n'hésitez-pas à me faire part de vos impressions..

Merci pour votre aide !