Débordement de FLEXBOX

**nagyp** · 08/02/2020, 15h12

Bonjour à tous.
Je bloque sur un problème de flexbox.
Je dois faire tenir trois articles dans un espace faisant 85% du container principal.
J'ai symbolisé cet espace en rose pour le repérer.
Mes articles refusent de tenir dans cet espace.
Auriez-vous une idée ?
Pour les photos elles sont en pièces jointes :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>
<!--logo -->
<div id="container-principal">
		<div class="titre">			
		<header class="flex-container flex-b">
			<figure>
				<img  src="img/logo.jpg" height="80px" width="80px" alt="logo" >
			</figure>
			<h1> Street life</h1>
 
		</div> <!-- fin titre -->
		<!--fin logo -->
		<!--menu -->
 
		<nav>
			<ul class="menu flex-b">
				<li><a href="#">accueil</a></li>
				<li><a href="#">archives</a></li>
				<li><a href="#">panorama</a></li>
				<li><a href="#">contact</a></li>
				<li><a href="#">à propos</a></li>
			</ul>
		</nav>
		</header>
 
	<!--fin menu -->
	<!--folio -->
<div class="wrapper">
			<section class="flex-b">
 
				<figure class="figure">
					<h6>1 juillet 2024</h6>
					<h2><a href="#">Jungle Street lives</a></h2>
						<img alt="street" src="img/image.jpg" >
 
					<figcaption> toward the jugle street life in Antroop, Vermont, winter 2020 </figcaption>
 
					<p>Lorem ipsum dolor <a href="#">Susan Kare</a>sit amet, <a href="#">Dribbble + photoshop</a>consectetur adipiscing elit. Donec non diam in <a href="#">Rich</a>neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque <a href="#">video</a>blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque <a href="#">original Macintosh</a>sollicitudin pretium fermentum. Lorem ipsum dolor Donec<br> non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolora laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum.</p>
				</figure>
 
				<figure class="figure" >
					<h6>10 juin 2024</h6>
							<h2><a href="#">Joe cowards</a></h2>
						<img  alt="trio" src="img/picture.jpg" >
 
					<figcaption> Joe Cowards' incredible face at jungle life party, sylver, 2019</figcaption>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque <br> sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl ...
 
								pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. <br>Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor 
								</p>
 
				</figure>
 
				<figure class="figure">
					<h6>11 avril 1815</h6>
							<h2><a href="#">Marquee Moon</a></h2>
						<img alt="cinema" src="img/cinema.jpg">
 
					<figcaption>Movie theater's marquee, moon, 1815</figcaption>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, hendrerit id dignissim vel, adipiscing interdum elit. Vivamus a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor a laoreet eros. Pellentesque sollicitudin pretium fermentum. Lorem ipsum dolor Donec non diam in neque blandit commodo. Quisque lobortis sollicitudin nisl pulvinar condimentum. Sed est diam, </p>			
				</figure>
			</section>
 
	<!--fin folio -->
	<!--mention -->
		<article class="mention" >
			<h2><a href="#">Street life n- The jungle groove</a></h2>
			<h5>Handcrafted pixels & text</h5>
			<h6>copyright 2012-2024, Street life LTD. Shipped from Hambourg, Germany.</h6>
		</article>
	<!--fin mention -->
 
<!--footer -->
		<figure class="flex-b icone">
			<p><a href="#"><img src="img/pinterest.png" width="32" height="32" alt="pinterest" /></a></p>
			<p><a href="#"><img src="img/dribbble.png" width="32" height="32" alt="dribbble"/></a></p>
			<p><a href="#"><img src="img/twitter.png" width="32" height="32" alt="twitter"/></a></p>
			<p><a href="#"><img src="img/instagram.png" width="32" height="32" alt="instagram"/></a></p>
			<p><a href="#"><img src="img/email.png" width="31" height="32" alt="email"/></a></p>
		</figure>
	<!--fin footer -->
 
</div>
</div>
</div> <!-- fin container-principal -->
</html>

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* reset */
* {
	margin:0; 
	padding: 0;
	box-sizing: border-box; }
 
body { font-family: arial, helvetica, sans-serif }
 
ul, a { list-style: none;
		text-decoration: none;}
 
/* fin reset */
figcaption, a { color: #0087cc; }
 
.flex-b{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center; }
 
#container-principal { width: 1940px;}
 
 
/* debut du header */
 .titre {
	color: #0087cc;
	font-size: 25px;
	padding-top: 25px;
	justify-content: center; }
 
 
  h1 {padding: 15px 0 0 10px;} 
  h2 a { font-size: 15px; }
  h2 { padding-bottom: 0.5em; }
  figure h6 {padding-top: 2em; }
 
.menu {
	justify-content: right;
	align-items: center;
	height: 2em;
	background-color: #0087cc;
	padding-right: 40px;}
 
.menu a {
	padding: 0 15px;
	color: #fff;
	 }
/* fin du header */	
 
.wrapper{
 	width: 85%;
	margin: auto;
	background-color:pink;
	}
 
.figure {
	flex: 0 1 284px;
	padding: 10px;
}
 
h6 {color: #929292;	}
 
p{color: #555;}
 
article{text-align: center;}
 
.icone a{ 
	padding-right:  0.5em;}

Invité · 09/02/2020, 10h28

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#container-principal { max-width: 1940px;}
 
.figure {
	flex: 0 1 33.33%;
	padding: 10px;
}
 
img{ max-width:100%; }

N.B. Mets de l'ordre dans ton fichier CSS.
Tout est en vrac...

**nagyp** · 10/02/2020, 20h06

Je sais pas comment tu fait pour trouver la solution aussi efficacement. A croire que c'est toi qui a fait les devoir.
Encore merci.

A bientot.

Débordement de FLEXBOX

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager