Div passant à la ligne Flexbox

WordPress :6.6
Statut : non résolu

Ce sujet contient 8 réponses, 3 participants et a été mis à jour pour la dernière fois par Africa, le il y a 9 mois.

9 sujets de 1 à 9 (sur un total de 9)

Auteur

Messages
20 septembre 2024 à 14 h 45 min #2480436
Africa
Participant

Initié WordPress
24 contributions
Bonjour,

Ma configuration WP actuelle
- Version de PHP/MySQL : 8.1.27
- Thème utilisé : Divi
- Extensions en place :
- Nom de l’hébergeur : Hostinger
- Adresse du site :
Bonjour

Je souhaiterai que les div passent à ligne en flexbox lorsque je réduis la taille de l’écran , mais je n’y parviens pas 🙁
Merci pour votre aide.

Bonne journée
```
<html>
  <head>
    <title>bruno</title>
    <style>
    .et_pb_salvattore_content{background-color:blue;display:flex;}
    .column.size-1of3 {background-color:red; padding:border 3px green;} 
     article{background-color:yellow;flex:1;border:5px solid red; margin:10px;}
    
    </style>
  </head>
  <body>
    <div class="et_pb_salvattore_content">
      <div class=".column.size-1of3"></div>
      <article>A</article>
      <article>B</article>
      <article>C</article>
    </div>
    <div class="et_pb_salvattore_content">
      <div class=".column.size-1of3"></div>
      <article>A</article>
      <article>B</article>
      <article>C</article>
    </div>
    
  </body>
</html>
```
<html>
<head>
<style>
.et_pb_salvattore_content{background-color:blue;display:flex;}
.column.size-1of3 {background-color:red; padding:border 3px green;}
article{background-color:yellow;flex:1;border:5px solid red; margin:10px;}
</style>
</head>

<body>
<div class= »et_pb_salvattore_content »>
<div class= ».column.size-1of3″></div>
<article>A</article>
<article>B</article>
<article>C</article>
</div>
<div class= »et_pb_salvattore_content »>
<div class= ».column.size-1of3″></div>
<article>A</article>
<article>B</article>
<article>C</article>
</div>
</body>
</html>
20 septembre 2024 à 19 h 15 min #2480462

ferman
Modérateur

Maître WordPress
7624 contributions

Bonjour,

Pouvez-vous donner l’adresse de votre site ainsi que la page où se situe le problème?

21 septembre 2024 à 4 h 51 min #2480496

Africa
Participant

Initié WordPress
24 contributions

Bonjour

Merci pour votre réponse, le site est en local , il sera opérationnel la semaine prochaine.

Puis je revenir vers vous fin de semaine prochaine ?
Bon weekend

Bruno

21 septembre 2024 à 6 h 08 min #2480497

Africa
Participant

Initié WordPress
24 contributions

Bonjour
J’ai mis un exemple de ce que j’ai fait sur cette page
https://www.menuiserie-menplast.fr/essai-flex.html

Je souhaite mettre 3 div de même hauteur et de même largeur sur la version PC, puis que les div passent à la ligne en tablette et mobil.
J’ai 6 div (3 et 3 en version PC)
Merci

21 septembre 2024 à 9 h 14 min #2480499
mathieu42
Participant

Maître WordPress
2025 contributions
déjà je suppose que vous souhaitez répartir les 3 « column » sur toute la largeur pour l’affichage large ?

pour cela ajoutez justify-content : space-evenly; dans .et_pb_salvattore_content.

ensuite pour que ça s’applique seulement pour l’affichage plus large que 1 000 pixels, englobez le code css dans ça :
```
@media (min-width : 1000px)
{
    .et_pb_salvattore_content
    {
        display : flex;
    }

}
```
21 septembre 2024 à 12 h 02 min #2480501

Africa
Participant

Initié WordPress
24 contributions

Merci
J’ai appliqué vos conseils, mais cela ne fonctionne pas.
Bon dimanche

21 septembre 2024 à 12 h 07 min #2480502

mathieu42
Participant

Maître WordPress
2025 contributions

mettez vos tests en ligne sinon on ne peut pas continuer à vous aider.

21 septembre 2024 à 13 h 02 min #2480503

ferman
Modérateur

Maître WordPress
7624 contributions

Bonjour,

Donc vous voulez deux rangées de 3 div et pour chaque rangée quelque chose qui ressemblerait ce qui est en pj ? Si oui, à mon avis, le plus simple serait d’inclure chaque série de trois div dans une div parente afin qu’on puisse traiter chaque série séparément. Sinon je pense qu’ il sera plus difficile d’avoir un bon aspect.

Pour moi, je propose d’attendre que votre site soit en ligne afin de pouvoir travailler correctement.

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.

21 septembre 2024 à 14 h 13 min #2480509

Africa
Participant

Initié WordPress
24 contributions

Merci
Auteur

Messages