IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Débordement de FLEXBOX


Sujet :

Positionnement en CSS avec flexbox

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Femme Profil pro
    en formation
    Inscrit en
    Septembre 2019
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : en formation

    Informations forums :
    Inscription : Septembre 2019
    Messages : 90
    Par défaut Débordement de FLEXBOX
    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;}
    Images attachées Images attachées     

  2. #2
    Invité
    Invité(e)
    Par défaut
    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...

  3. #3
    Membre confirmé
    Femme Profil pro
    en formation
    Inscrit en
    Septembre 2019
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : en formation

    Informations forums :
    Inscription : Septembre 2019
    Messages : 90
    Par défaut Un grand merci une fois de plus
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Lazarus] Lister les CharSets d'une font
    Par Jipété dans le forum Lazarus
    Réponses: 28
    Dernier message: 24/07/2023, 13h57
  2. [Python 3.X] Besoin d'un petit coup de main pour du Algo->Python
    Par Pierre_Euh dans le forum Général Python
    Réponses: 9
    Dernier message: 31/01/2019, 09h15
  3. Réponses: 1
    Dernier message: 12/03/2014, 22h58
  4. Réponses: 4
    Dernier message: 06/09/2013, 17h22
  5. UPDATE trop compliqué, besoin d'un petit coup de main ;)
    Par pwangen dans le forum Requêtes
    Réponses: 1
    Dernier message: 17/02/2006, 11h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo