28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page Flex 2

Bonjour
J’ouvre ce nouveau message car j’ai mis trop rapidement Résolu au post précédent "mise en page Flex" auquel parsimonhi à donner des solutions.

1 / Il me reste à créer un espace en version desktop entre les divs, j’y suis parvenu en diminuant la taille des images mais en rétrécissant la fenêtre du navigateur les divs se touchent.
Le soucis vient peut-être de table : display ?
J’ai essayé d’appliquer une class à la div centrale (2) avec des margins ???

2 / En version desktop Je souhaiterai mettre les 3 divs à la même hauteur quelque soit le contenu.

3/ En version mobile, j'aimerai avoir en espace entre ces divs
https://www.menuiserie-menplast.fr/flex.html

Cette nuit J'ai fait un essai sur cette page mais j'ai plus de code que parsimonhi, je ne suis pas certain que ce soit clean ?
En version desktop je ne suis pas parvenu à mettre la même hauteur sur les divs (quelque soit le contenu)

https://www.menuiserie-menplast.fr/blog.html
Merci
Modifié par africa (21 Oct 2020 - 05:48)
Bonjour,

Regarde bien les div avec la classe "m4" sur cette grille en flex : Grid Layout

J'ai créé ce framework il y a quelques années. "m4" signifie que l'élément occupe 4 colonnes sur une grille de 12 colonnes. Cette grille utilise la technique des "marges négatives" avec une gouttière de 1rem. Si tu analysais le code tu y trouverais ceci pour ton cas spécifique :
<div class="grid">
  <div class="m4">item</div>
  <div class="m4">item</div>
  <div class="m4">item</div>
</div>

[class^="grid"] {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 1rem);
  margin-left: -1rem;
}

[class^="grid"] > * {
  box-sizing: border-box;
  width: calc(100% - 1rem - 0.01px);
  margin-left: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 36.01rem) { /* A définir par une valeur perso */
  .m4 {
    width: calc(33.33% - 1rem - 0.01px);
    background-color: Orange; }
}

/* Pour la démo : */
.m4 {
  background-color: Orange;
}

Le pen : Codepen
Modifié par Olivier C (21 Oct 2020 - 08:12)
19ROMEO93 a écrit :
bonjour peux tu nous envoyer ton code stp pour qu on puisse voir ton problème ?

Bonjour
Merci
 <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>essai flex</title>
    <style>
   .container{background-color: yellow;margin:0 auto;max-width:1150px;} 
   .blog {background-color:aqua;display:flex;justify-content:space-between;}
    .blog2 {display:table;background-color:bisque;flex:1;max-width:400px;}
    img{width:100%;height:auto;}
    @media only screen and (max-width:800px) {
    	.blog{display:table;margin:0 auto;}
    	.blog2{width:100%;}}
  </style>
    </head>
  <body>
          <div class="container">
            <div class="blog">
            <div class="blog2"><img src="blog/1.jpg">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
             <p class="more">div 1</p>
            </div>
            <div class="blog2 blog3"><img src="blog/1.jpg">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
              <p class="more">div 2</p>
            </div>
            <div class="blog2"><img src="blog/1.jpg">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
              <p class="more">div 3</p>
            </div>
  
  </body>
</html>
Modérateur
Bonjour
africa a écrit :

2 / En version desktop Je souhaiterai mettre les 3 divs à la même hauteur quelque soit le contenu.

Il faudrait supprimer le display:table sur blog2 (en fait, je l'avais laissé par erreur, il ne sert pas; c'est celui sur blog pour la version fenêtre étroite qui sert !).

africa a écrit :

1 / Il me reste à créer un espace en version desktop entre les divs, j’y suis parvenu en diminuant la taille des images mais en rétrécissant la fenêtre du navigateur les divs se touchent.
Le soucis vient peut-être de table : display ?
J’ai essayé d’appliquer une class à la div centrale (2) avec des margins ???

Avec des margins en effet (sur blog, blog2, blog3 à adapter), ça doit le faire.

africa a écrit :

3/ En version mobile, j'aimerai avoir en espace entre ces divs
https://www.menuiserie-menplast.fr/flex.html

J'imagine que ce sont des espaces dans le sens de la hauteur. Avec un margin-bottom, ça le fait.

Exemple :
	.container2{margin:0 auto;max-width:1150px;}  
	.chantier {padding:0 0.5rem}  
	img{width:100%;height:auto;}
	.blog{display:table;margin:0 auto;}
	.blog2{border:1px solid #ccc;width:100%;margin-bottom:1em;max-width:400px;}
	@media only screen and (min-width:800px) {
		.blog {display:flex;justify-content:space-between;}
		.blog2 {flex:1;margin:0;}
		.blog3 {margin:0 1em;}


         <div class="container2">
            <h2 class="alingh">Suivez nos dernières actualités et réalisations</h2>
            <div class="blog">
              <div class="blog2"><img src="blog/1.jpg">
                <h3 class="alingh">Chantier 1</h3>
                <p class="chantier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br><a class="more">div 1</a></p>  
              </div>
              <div class="blog2 blog3"><img src="blog/1.jpg">
                <h3 class="alingh">Chantier 2</h3>
                <p class="chantier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br><a class="more">div 1</a></p>
              </div>
              <div class="blog2"><img src="blog/1.jpg">
                <h3 class="alingh">Chantier 3</h3>
                <p class="chantier">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br><a class="more">div 1</a></p>
            </div>
          </div>

Amicalement,
Modifié par parsimonhi (21 Oct 2020 - 09:27)
Meilleure solution
Modérateur
Bonjour,

J'ai réduit le css à l'essentiel (le reste est cosmétic). Et normalement, ça marche avec n'importe quelle taille d'image.
	.blog{display:table;margin:0 auto;}
	.blog2{border:1px solid #ccc;margin-bottom:1em;max-width:400px;} 
	img{width:100%;}
	@media only screen and (min-width:800px) {
		.blog {display:flex;}
		.blog2 {flex:1;margin-bottom:0;}
		.blog3 {margin:0 1em;}}


EDIT: et voici éventuellement une autre version avec que du flex (au lieu d'une table pour la version fenêtre étroite et un flex pour la fenêtre large)
.blog{max-width:400px;margin:0 auto;display:flex;flex-direction:column;}
.blog2{border:1px solid #ccc;margin-bottom:1em;} 
img{width:100%;}
@media only screen and (min-width:800px){
	.blog{max-width:1150px;flex-direction:row;}
	.blog2{flex:1;margin-bottom:0;}
	.blog3{margin:0 1em;}}


EDIT2: et encore une autre version où la version fenêtre étroite se contente du display:block par défaut. Avec toutes ces variantes, tu devrais pouvoir en trouver une qui s'adapte au reste de ton site.
.blog{max-width:400px;margin:0 auto;}
.blog2{border:1px solid #ccc;margin-bottom:1em;} 
img{width:100%;}
@media only screen and (min-width:800px) {
	.blog {max-width:1150px;display:flex;}
	.blog2 {flex:1;margin-bottom:0;}
	.blog3 {margin:0 1em;}}


Amicalement,
Modifié par parsimonhi (21 Oct 2020 - 10:57)
Merci, merci
Wouahh,
Parsimonhi tu es très prolifique, j'ai de quoi faire Smiley biggrin
Super
Bonne journée
Sujet clos
Aller à