Flexbox

Bonjour
Je lutte avec Flexbox depuis quelques heures ?

Destock
Je souhaiterai avoir des div de même hauteur en version et centrer sur la page. (fichier joint)

Mobile
Et un passage à la ligne en version (fichier joint)
Pouvez vous m’aider, merci
Bruno
----------------------------------------------------------------------------------------------------
En pièce jointe un fichier expliquant le problème et un lien vers la page ou je rame,
et le lien vers la page en ligne.
https://www.menuiserie-menplast.fr/10.html
Modifié par arii (22 Sep 2024 - 12:25)

Bonjour arii,

Malgrès ton exemple en ligne et ton image avec les explications, je n'arrive pas à bien tout comprendre...

arii a écrit :
mettre les div de meme hauteur sur la version desktop

Elle sont déjà de la meme hauteur là non ? L'élément 6 en violet à la meme taille que le 5 en rose malgré la différence de contenu. Si c'est mettre le rouge et le violet à la meme taille c'est pas possible par contre.

arii a écrit :
mettre à la ligne les div

il suffit d'enlever le display flex et le with 33%. Les div se positionneront à la ligne naturellement

Bonne journée

Merci Laurent
En fait si j'ai bien compris en version mobile je supprime display flex et witdh 33%, c'est ok.
Mais pour conserver l'alignement des 3 div en version destock que dois je faire ?

Pour avoir les 6 div de même hauteur sur destock que faut il faire ?

Merci. pour ton aide.

arii a écrit :
En fait si j'ai bien compris en version mobile je supprime display flex et witdh 33%, c'est ok.
Mais pour conserver l'alignement des 3 div en version destock que dois je faire ?

Alors cette réponse me fait penser que tu ne connais peut etre pas le media-queries. C'est une règle en CSS qui va permettre d'appliquer ou non du code pour telle ou telle résolution :
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Pour faire simple :

@media (min-width: 600px) {
  .container {
    display: flex;
  }
}

Ca code n'appliquera le display flex sur le .container qu'au dessus de 600px.

arii a écrit :
Pour avoir les 6 div de même hauteur sur destock que faut il faire ?

Ca par contre, à part leur donner une hauteur fixe je ne vois pas. Surtout qu'elles sont dans 2 container séparé et sur deux ligne séparée.

Par contre pour ton second point tu peux passer par grid plutôt que flex :

https://jsfiddle.net/xLs46j1z/2/

Et couplé au media queries ca donnerait ca :

https://jsfiddle.net/xLs46j1z/3/ (réduit la partie du résultat pour voir l'effet en dessous de 600px)

Bonne soirée !