Alignement de blocs avec Flexbox

**labarre2002** · 09/08/2022, 07h07

Bonjour

Je dois realiser une page qui doit ressembler a ca:

Nom : doft.jpg
Affichages : 505
Taille : 57,5 Ko

mon code HTML:

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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
 
<title>A Day of 42</title>
 
<link rel="stylesheet"  href="style.css">
</head>
<body>
 
 
 
<section>
 
<div class="banniere">
<img  src="images/day_of_the_42.png"  alt="Banniere du site"  width=""  height="">
</div>
 
 
</section>
 
 
 
 
 
<section class="image">
 
<div class="images_c">
<img usemap="#cluster" src="images/cluster.jpg" alt="Salle d informatique">
<map name="cluster">
<area  shape="circ" coords="900,394,81" target="_blank"  rel="nofollow,noreferrer" href="http://www.apple.com">
<area  shape="rect" coords="471,328,324,545" target="_blank"  rel="nofollow,noreferrer" href="http://www.ikea.com">
</map>
</div>
 
</section>
 
 
 
 
 
<section>
 
<div class="left_menu">
 
<div class="left">
<img  src="images/arrow.png"  alt="Avancer" >
</div>
 
<div class="left">
<img  src="images/main.png"  alt="Prendre" >
</div>
 
<div class="left">
<img  src="images/oeil.png"  alt="Regarder" >
</div>
 
 
<div class="left">
<img  src="images/outil.png"  alt="Utiliser" >
</div>
 
<div class="left">
<img  src="images/chat-icon.png"  alt="Parler" >
</div>
 
 
</div>
 
</section>
 
 
 
 
 
 
 
 
 
<section >
 
<div class="right_menu">
<div class="">
<img src="images/book.png"  alt="">
</div>
 
<div class="">
<img src="images/towel.png"  alt="">
</div>
 
<div class="">
<img  src="images/brick.jpg"  alt="">
</div>
 
 
 
 
</div>
 
</section>
 
 
 
 
 
 
 
 
</body>
</html>

ci desous mon code CSS:

Code :

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
body{
    background-color:royalblue;
}
 
.banniere{
 
    display:flex;
    flex-direction: row;
    justify-content:center;
   height: 258px;
   margin-top: 10px;
   position:relative;
 
}
 
.images{
display: flex;
flex-direction: row;
margin-top:15px;
margin-top: 10px;
}
 
.left_menu{
display:column;
align-items: flex-start;
order:1;
 
}
 
.images_c{
    display:flex;
flex-direction: row;
justify-content: center;
order:5;
 
}
 
.right_menu{
    display:column;
    align-items: flex-start;
    order:1;
 
}